FullCalendar In Visualforce – An easy calendar event management app

FullCalendar In Visualforce – An easy calendar event management app

With this post, let’s implement fullcalendar.io library to create a complete event management app. App features will include:

  • Easy event creation (Create event directly by clicking on Calendar day/hour)
  • Easy event updation
  • Multi-day event creation
  • Drag-Drop event to update event timing

1. First of all, let’s create a schema like below:

MyCalendar App- Backend Schema

Calendar_Event__c – This object will store calendar event records. Each event scheduled will be stored in this object. Below are the fields:

  • Name (Event Title) – Text
  • Start_Time__c – DateTime
  • End_Time__c – DateTime

User_Calendar__c – Junction object with a lookup field for User object and Master-Detail for Calendar_Event__c. Since one user can have multiple events and one event can be scheduled for multiple users, we need this junction object in place. Below are the fields:

  • Name – Auto Number
  • Event__c – Master-Detail (Calendar_Event__c)
  • User__c – Lookup (User)

 

2. Now download required JS & CSS library static resource from my GitHub repository here

This static resource has below mentioned JavaScript and CSS library:

  • fullcalendar CSS & JavaSscript
  • jQuery CSS & JavaScript
  • Moment JavaScript

3. Apart from the above static resource, let’s create one more JavaScript static resource file named FullCalendarDemo.js

This file is basically used for handling events generated from Visualforce Page. You can write this complete script within Visualforce page as well if you do not want to create the static resource. Below is the code:



4. Now let’s create Visualforce Page named “FullCalendarDemo.vfp



5. Visualforce Controller named “FullCalendarDemo.apxc



Congratulations!! now you have a fully functional event management app. Watch below demo to see it in working:

Hope you liked this post. Please do share your feedback or reviewes in comments.

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 26 Comments

  1. Avatar

    Dear Manish,

    Appreciate the amazing work that you do with blog and lightning sessions that are put in Youtube and also your sessions on Hyderabad meetups.

    FullCalendar In Visualforce – An easy calendar event management app
    I have one doubt on this blog. We have implemented a similar functionality like this using jquery in our org and have incorporated that into managed package to put that in other orgs.
    But when we install this in other orgs, many issues are arising and its kind of difficult to solve them.

    If we follow your code for the calendar, will we get the same issues when install it other orgs because you have also developed using jquery ?
    Please let me know if there is any other Calendar functionality that will work.

    1. Avatar

      Hi Varun,

      We have to use jQuery as jQuery library is prerequisite of fullcalendar library. However, I believe you should not get any issues with this code if you maintain the schema and static resource as same. You can try to package the same and try to deploy in another org.

  2. Avatar

    i am facing a issue on calendar Task, event is not creating .please help me on this task these are user credentials
    lovely@sfdc.com
    password:feeling449

    1. Avatar

      Hi Rehaman,

      Please do not share your credential on public forum.
      Also please do check if you are having same schema and code as what I have, you should be able to create the task.

      1. Avatar

        Hi Manish,

        Thank u for suggestion next time i will never share my credential.now its working and need to coustmize ur code in our Requirements.

  3. Avatar

    Hi Manish,

    i want to add picklist fields in your calendar and how to create these picklist fields in javascript.

    1. Avatar

      You mean drop down or html select, right?
      You can easily do it by adding html select in your page and then you can fill you html select with values from javascript.

  4. Avatar

    Hi Manish,
    i am creating calendar but getting error massage Please help me
    Error: /apex/FullCalendarDemo: No remoted actions found for ‘VisualforceLightningDataShare.getEvents’
    Error Error: No remoted actions found for ‘VisualforceLightningDataShare.getEvents’.

    1. Avatar

      Please create the controller for visualforce page. Also please create the remote action method in your controller.

  5. Avatar

    Hi Manish,

    I have creating calendar in my developer org but got a Error Please Please help me.
    :—————————————-ERROR : ——————————————–
    Error Error: /apex/FullCalendarDemo: No remoted actions found for ‘VisualforceLightningDataShare.getEvents’
    Error Error: No remoted actions found for ‘VisualforceLightningDataShare.getEvents’.

    1. Avatar

      Please create the controller for visualforce page. Also please create the remote action method in your controller.

  6. Avatar

    Hi Manish,

    i am Added picklist field on your Calendar .working fine in Visualforce but picklist field is not save only Start Date, End date and Title is Save
    i am also added picklist filed in JS .
    Please Help me

  7. Avatar

    Hi Manish,

    I am taking reference of you code but i want to have events color based on some codntion.Like i have a field called status so if status is high all events color whose status is high should be red and if low then event color should be green like that.Kindly suggest the needful.

    1. Avatar

      Hi Sonu,

      When constructing your event object, you can specify color, borderColor, backgroundColor and textColor. Something like below:

      eventsData.forEach(function(event){
      const newEvent = {};
      newEvent.Id = event.Event__c;
      newEvent.title = event.Event__r.Name;
      newEvent.start = new Date(event.Event__r.Start_Time__c).toISOString();
      newEvent.end = new Date(event.Event__r.End_Time__c).toISOString();
      newEvent.editable = true;
      newEvent.color = red;
      newEvent.backgroundColor = 'yellow';
      newEvent.borderColor = 'black';
      newEvent.textColor ='white';
      events.push(newEvent);
      });

  8. Avatar

    Hi Manish,
    Kindly give some hint that how can i change event color based on some field data condition.

    1. Avatar

      Hi Karan,

      When constructing your event object, you can specify color, borderColor, backgroundColor and textColor. Something like below:

      eventsData.forEach(function(event){
      const newEvent = {};
      newEvent.Id = event.Event__c;
      newEvent.title = event.Event__r.Name;
      newEvent.start = new Date(event.Event__r.Start_Time__c).toISOString();
      newEvent.end = new Date(event.Event__r.End_Time__c).toISOString();
      newEvent.editable = true;
      newEvent.color = red;
      newEvent.backgroundColor = 'yellow';
      newEvent.borderColor = 'black';
      newEvent.textColor ='white';
      events.push(newEvent);
      });

  9. Avatar

    Hi Manish,
    I have a problem when I add the visualforce page with a calendar to a public site. Styles stop working and the update window starts to move down. Also gives an error “Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close'”.
    but this error on file jquery.min.js

    Maybe you know what to do with it. Thanks

  10. Avatar

    Hi Manish,

    I have received the same error as a few people. ‘ No remoted actions found for ‘VisualforceLightningDataShare.getEvents’. But I have added all the code that you have provided. I have an apex controller class and visualforce page, all called ‘FullCalendar’ (I just removed the demo part). The only name that is different is the static resource page which is called fullcalendarSR.js

    Thank you,
    Emily

    1. Avatar

      Hi Emily,

      it would help me identify the issue if you can paste your code. The error you are receiving is because you may not have a @RemoteFunction in you controller.

  11. Avatar

    Hi Manish
    Great post. I was looking to use something like this (a VF Page) to display) the times for the various sessions we have on a group program. These are custom objects with start and finish Date/Times. Can your VisualForce full calendar be adapted to display other records with start end time rather than events?
    Regards

    1. Avatar

      Hey Scott, yes it can work with any custom object, I myself has created two custom objects for this demo. The only thing you need to make sure is to parse the data from the these custom objects and supply to javascript of fullcalendar.js. Check “FullCalendarDemo.js” file

  12. Avatar

    Hi Manish,

    Thanks for your post, however.

    I’m facing this error: No remote action found for: VisualforceLightningDataShare.getEvents even though I have the same controller.

  13. Avatar

    could I email you a couple screenshots of it? I have the two remote action methods in the controller, it just seems like its not picking up on that. I have called the controller in the first line of the visual force page, is there any other way I have to connect the two pages?

  14. Avatar

    Hi Manish,
    I have added the same code provided by you. But I am getting bellow error:
    No remoted actions found for ‘VisualforceLightningDataShare.getEvents’.
    I am using custom object Journey_Planner__c in the place of Calendar_Event__c
    ==============================================================
    Apex Class
    ==============================================================
    global class FullCalendarDemo{

    @RemoteAction
    global static List getEvents() {
    String userId = UserInfo.getUserId() ;
    List userCalendar = [SELECT Id, Name, User__r.Name,
    Event__c, Event__r.Name, Event__r.Form_Date__c, Event__r.To_Date__c
    FROM User_Calender__c
    WHERE User__c=:userId];
    if(userCalendar.size()>0){
    return userCalendar;
    } else{
    return null;
    }
    }

    @RemoteAction
    global static List createOrUpdateEvents(String calendarEvent) {
    //Geting Calendar_Event__c object from received Json String
    Journey_Planner__c eventObject = ((Journey_Planner__c) JSON.deserialize(calendarEvent, Journey_Planner__c.class));
    //you need to put proper regex to validate recordId
    Boolean isOldRecord = eventObject.Id != null;
    upsert eventObject;
    //If its new record, create User Calendar record as well
    if(!isOldRecord){
    User_Calender__c userCalendar = new User_Calender__c(Event__c=eventObject.Id, User__c=UserInfo.getUserId());
    insert userCalendar;
    }
    return getEvents();
    }
    }

    ==========================================================
    Visualforce Page
    ==========================================================

    .vf-header {
    padding-left: 20px;
    background-color: lightgrey;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    }
    .vf-input-element {
    margin-left: 20px;
    }

    Update Existing Event

    Event Title

    Start Time

    End Time

    Event Title

    Start Time

    End Time

    /**
    * Your org’s my domain url
    * Please include port as well if any
    **/
    var lightningDomain = “https://ap4.salesforce.com/”;

    $( document ).ready(function() {
    //Attach Listeners
    attachListners();
    //Initialize calendar
    const calendar = CalendarSingleton.getCalendar();
    //Get user’s events
    getEvents(calendar);

    $( “#createStartTime,#createEndTime,#updateStartTime,#updateEndTime” ).datepicker();
    });

    /**
    * Function to invoke remote action to get current user’s
    * all events and populate the calendar based on response
    * */
    function getEvents(){
    //Invoking remote action
    Visualforce.remoting.Manager.invokeAction(
    ‘{!$RemoteAction.VisualforceLightningDataShare.getEvents}’,
    function(result, event){
    if (event.status) {
    //Call was successful, add events to calendar
    addEvents(result, calendar);
    } else if (event.type === ‘exception’) {
    //Exception in remote call
    console.error(`${event.message} ${event.where}`);
    } else {
    //Call was unsuccssful
    console.error(`${event.message}`);
    }
    },
    {escape: true}
    );
    }

    /**
    * Function to invoke remote action to get current user’s
    * all events and populate the calendar based on response
    * */
    function createOrUpdateEvents(calendarEvent){
    //Invoking remote action
    Visualforce.remoting.Manager.invokeAction(
    ‘{!$RemoteAction.VisualforceLightningDataShare.createOrUpdateEvents}’,
    calendarEvent,
    function(result, event){
    if (event.status) {
    //Call was successful, add events to calendar
    addEvents(result, calendar);
    } else if (event.type === ‘exception’) {
    //Exception in remote call
    console.error(`${event.message} ${event.where}`);
    } else {
    //Call was unsuccssful
    console.error(`${event.message}`);
    }
    },
    {escape: true}
    );
    }

  15. Avatar

    Hi There,

    Its work perfectly,

    I want to make a vertical resource view here if anyone have helpful link let me know.

Leave a Reply

Close Menu