Code

Support for Ajax Full Featured Calendar 2

Support for Ajax Full Featured Calendar 2

Cart 1,674 sales
Recently Updated

pauloreg supports this item

Supported

Popular questions for this item

What are the steps to solve the “Failed to add event”?

Diagnose database connection issue

  1. Navigate to “_install.php”
  2. If you see this message: “The installer detected that AFFC2 is already installed.” it means it have no database connection issue. If you see forms or anything other than that it means you have database connection problems, if so, open up the “connection.php” file and revise your credentials.

Alter table method

Run this query: (Works in some configurations for Mysql 5.7+):
ALTER TABLE `calendar` CHANGE `repeat_id` `repeat_id` INT(11) NULL; 

If the steps above does not work, contact support providing a demo link.

Why I am unable to import events?

If you are having issues importing events on your server, make sure the ‘includes’ folder is writable.

How do I see the week view or the day view when the calendar loads instead of month view?

On your index.php or dashboard.php at the end of the file where you have the following comment <!-- call calendar plugin --> insert option defaultView.

By default the jquery option

defaultView

is set to month e.g:
defaultView: 'month',
For:
  • Week:
    defaultView: 'basicWeek',
    or
    defaultView: 'agendaWeek',
  • Day:
    defaultView: 'basicDay',

How do I use the 12H format?

By default the calendar is set to 24H format, if you need to change this options use the jquery option:

timeFormat

On your index.php or dashboard.php at the end of the file where you have the following comment <!-- call calendar plugin --> insert option timeFormat

For
  • 12H Format:
    timeFormat: 'h:mm'
  • 12H Format with AM/PM:
    timeFormat: 'h(:mm)t'

Currently these settings only work for Week and Day View.

How do I add Custom Fields?

To add custom fields to the calendar, use this builder that will generate the code to construct the fields, or you can manually edit the form.json file using this structure:

{
    "dataType": "dataType",
    "class": "class",
    "fields" : 
        {    
            "fieldLabel": "fieldInstruction",
        }
}
  • dataType: the input type for the field, allows: input,input-upload,select,radio,checkbox,textarea
  • class: the class for the input
  • fields: multiple fields for the same input group
  • fieldLabel: the html field label
  • fieldInstruction: the instructions for the system to recognize

To build fieldInstructions according to the dataType you need to follow this instruction:

  • <name> For HTML name tag
  • ~placeholder~ For HTML placeholder tag
  • values{a,b,c} For HTML option values tag
  • labels(A, B, C) For HTML option tag
  • *tablename*  For a table name on the same database
  • #name# For the column of the table
  • +file+ For the HTML input file. Only one input file and the system handles the upload process itself.

And you can build the instruction set as this:

pullFrom-tableName-*customersTable*-fields-#customerName#-name-<customers_name>
pullFrom-options-name-<reads>-values{book,ebook,article}-labels(Book, eBook, Article)

*You might have a look at the generated or existing configuration so you can have a see how its done.

How to I make Monday as first day of the week?

To use Monday as first day of the week, you have the ‘firstDay’ option, where you can set it to value 1 for Monday and 0 for Sunday.

On your index.php or dashboard.php at the end of the file where you have the following comment <!-- call calendar plugin --> insert option firstDay

E.g:

'firstDay': 1

How do I change the order of the week days?

To change the order of the week day you have the ‘firstDay’ option, where you can set it to values from 0 – 6, depending when you want the week to start.

E.g:

If you want the order: Mon, Tue, Wed, Thu, Fri, Sat, Sun set a value of 1;

If you want the order: Tue, Wed, Thu, Fri, Sat, Sun, Mon set a value of 2;

How can I add the ‘today’ button?

You can add the today button by overriding the default configuration:

On your index.php or dashboard.php at the end of the file where you have the following comment <!-- call calendar plugin --> insert options

today: 'Today',
fc_extend: {
    header:
    {
        left: 'prev,next, today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek'
    }
}

How do I add an existing fullcalendar option?

Now you can straight add the fullcalendar option by overriding the default configurations by using the fc_extend option.

For example, If you like or not to display a marker indicating the current time, you can use the nowIndicator option, and use like this:

fc_extend: {
    nowIndicator: true
}

Add all other options you need to this fc_extend object.

How to use the File Upload Feature (Custom Fields)?

  1. First you need to create a new column named “file” on your database table and you can set it to text type.

  2. Go over this link: http://pauloreg.com/extras/affc-builder/cfb.html and drag and drop the “File upload”, and the click generate.

    You will have a code like this:

    [
        {
            "dataType": "input-upload",
            "class": "",
            "fields": {
                "": "pullFrom-options-name-<file>+file+" 
            }
        }

  3. Insert the generate code to the “form.json” found on the “includes” folder.
  4. Open up the connection.php file, find the ‘SITE_FILES_URL’ constant, and update it with your Site URL. By default, the uploaded files, goes to a files folder.
    Sample:
    define('SITE_FILES_URL', 'http://localhost/AFFC2-3.2/Demo/Simple/files/');
  5. Create a new event on the calendar, upload a file, save it and you will see the link to download the file when you open the event.

How to add events from Google Calendar?

Add these options:

gcal: true,
otherSource: {
    googleCalendarApiKey: '{YOUR_API_KEY_HERE}', 
    googleCalendarId: '{YOUR_SHARED_CALENDAR_ID}'
}

You must first have a Google Calendar API Key for the {YOUR_API_KEY_HERE}:

  1. Go to the Google Developer Console and create a new project.
  2. Once in the project, on the sidebar, go to APIs & auth > APIs.
  3. Find “Calendar API” in the list and turn it “ON”.
  4. On the sidebar, click APIs & auth > Credentials.
  5. In the “Public API access” section, click “Create new Key”.
  6. Choose “Browser key”.
  7. If you know what domains will host your calendar, enter them into the box. Otherwise, leave it blank. You can always change it later.
  8. Your new API key will appear. It might some time before it starts working.

Then you need to make your google calendar public:

  1. In the Google Calendar interface, locate the “My calendars” area.
  2. Hover over the calendar you need and click the downward arrow.
  3. A menu will appear. Click “Share this Calendar”.
  4. Check “Make this calendar public”.
  5. Make sure “Share only my free/busy information” is unchecked.
  6. Click “Save”.

Obtain your Google Calendar’s ID for the {YOUR_SHARED_CALENDAR_ID}:

  1. In the Google Calendar interface, locate the “My calendars” area on the left.
  2. Hover over the calendar you need and click the downward arrow.
  3. A menu will appear. Click “Calendar settings”.
  4. In the “Calendar Address” section of the screen, you will see your Calendar ID. It will look something like “something@group.calendar.google.com”.

How to change the default color of an event?

You can change the default color of the event using this jquery option: defaultColor.

On your index.php or dashboard.php at the end of the file where you have the following comment <!-- call calendar plugin --> insert the defaultColor and set a color in HEX format.

E.g:
defaultColor: '#ff0000',

What customers did contribute to this project?

Special thanks for:

  • Bob Mulder
  • Christian Suta
  • Jan-Paul Kleemans
  • Patrik Iden

To provide features, reporting a bug providing code fix.

How do I restrict time range for the week view?

You can use the fc_extend function for that.

AFFC2:
fc_extend: {
    minTime: "08:00:00",
    maxTime: "20:00:00",
}
AFFC5:
fc_extend: {
    slotMinTime: "08:00:00",
    slotMaxTime: "20:00:00",
}

Show more

Contact the author

This author provides limited support for this item through email contact form.

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

However, item support does not include:

  • Customization services
  • Installation services

View the item support policy

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey