+ Start a Discussion
Pritam ShekhawatPritam Shekhawat 

vf page calendar how to add new events in calendar

Hello Everyone ,
                       I am working on Custom Calendar in VisualForce page. I follow  steps from this  http://www.codebycody.com/2013/06/create-calendar-view-in-salesforcecom.html . Everything is doing fine but i dont know how to add new event in custom calendar on click on date.
So any idea how i can add new events ??
My controller
public class CalendarExample_Controller {

    public Boolean includeMyEvents {get;set;}

    public list<calEvent> events {get;set;}


    //The calendar plugin is expecting dates is a certain format. We can use this string to get it formated correctly

    String dtFormat = 'yyyy-MM-dd HH:mm:ss';



    public CalendarExample_Controller() {

        //Default showing my events to on

        includeMyEvents = true;



    public PageReference pageLoad() {

        events = new list<calEvent>();

        //Get Contact's Birthdays

        for(Contact cont : [select Id, Birthdate, FirstName, LastName from Contact where Birthdate != null]){

            //here we need to replace the birth year with the current year so that it will show up on this years calendar

            DateTime startDT = datetime.newInstance(Date.Today().Year(),cont.Birthdate.Month(), cont.Birthdate.Day());

            calEvent bday = new calEvent();


            bday.title = cont.FirstName + ' ' + cont.LastName + '\'s Birthday!';

            bday.allDay = true;

            bday.startString = startDT.format(dtFormat);

            //Because this is an all day event that only spans one day, we can leave the send date null

            bday.endString = '';

            bday.url = '/' + cont.Id;

            bday.className = 'event-birthday';




        //Get Campaigns

        for(Campaign camp : [select Id, Name, StartDate, EndDate from Campaign where IsActive = true]){

            DateTime startDT = camp.StartDate;

            DateTime endDT = camp.EndDate;

            calEvent campEvent = new calEvent();


            campEvent.title = camp.Name;

            campEvent.allDay = true;

            campEvent.startString = startDT.format(dtFormat);

            campEvent.endString = endDT.format(dtFormat);

            campEvent.url = '/' + camp.Id;

            campEvent.className = 'event-campaign';




        //Get my Events if we have selected the correct option


            for(Event evnt: [select Id, Subject, isAllDayEvent, StartDateTime, EndDateTime from Event where OwnerID = :UserInfo.getUserId()]){

                DateTime startDT = evnt.StartDateTime;

                DateTime endDT = evnt.EndDateTime;

                calEvent myEvent = new calEvent();


                myEvent.title = evnt.Subject;

                myEvent.allDay = evnt.isAllDayEvent;

                myEvent.startString = startDT.format(dtFormat);

                myEvent.endString = endDT.format(dtFormat);

                myEvent.url = '/' + evnt.Id;

                myEvent.className = 'event-personal';




        return null;



    public PageReference toggleMyEvents() {


            includeMyEvents = false;



            includeMyEvents = true;



        return null;



    //Class to hold calendar event data

    public class calEvent{

        public String title {get;set;}

        public Boolean allDay {get;set;}

        public String startString {get;private set;}

        public String endString {get;private set;}

        public String url {get;set;}

        public String className {get;set;}

visualforce page
<apex:page controller="CalendarExample_Controller" action="{!pageLoad}">

    <link href="{!$Resource.fullCalendarCSS}" rel="stylesheet" />

    <link href="{!$Resource.fullCalendarPrintCSS}" rel="stylesheet" media="print" />


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script src="{!$Resource.fullCalendarMinJS}"></script>

    <apex:includeScript value="{!URLFOR($Resource.momentmin)}"  />


        //We need to wrap everything in a doc.ready function so that the code fires after the DOM is loaded

        $(document).ready(function() {   

            //Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go. 


                header: {

                    left: 'prev,next today',

                    center: 'title',

                    right: 'month,agendaWeek,agendaDay'


                editable: true,



                    //At run time, this APEX Repeat will reneder the array elements for the events array

                    <apex:repeat value="{!events}" var="e">


                            title: "{!e.title}",

                            start: '{!e.startString}',

                            end: '{!e.endString}',

                            url: '{!e.url}',

                            allDay: {!e.allDay},

                            className: '{!e.className}'








    <!--some styling. Modify this to fit your needs-->


        #cal-options {float:left;}

        #cal-legend { float:right;}

        #cal-legend ul {margin:0;padding:0;list-style:none;}

        #cal-legend ul li {margin:0;padding:5px;float:left;}

        #cal-legend ul li span {display:block; height:16px; width:16px; margin-right:4px; float:left; border-radius:4px;}

        #calendar {margin-top:20px;}

        #calendar a:hover {color:#fff !important;}


        .fc-event-inner {padding:3px;}

        .event-birthday {background:#56458c;border-color:#56458c;}

        .event-campaign {background:#cc9933;border-color:#cc9933;}

        .event-personal {background:#1797c0;border-color:#1797c0;}



    <apex:sectionHeader title="My Calendar Example"/>

    <apex:outputPanel id="calPanel">

        <apex:form >

            <div id="cal-options">
                <apex:commandButton value="{!IF(includeMyEvents,'Hide My Events','Show My Events')}" action="{!toggleMyEvents}"/>


            <div id="cal-legend">


                    <li><span class="event-birthday"></span>Contact's Birthdays</li>

                    <li><span class="event-campaign"></span>Campaigns</li>

                    <li style="{!IF(includeMyEvents,'','display:none')}"><span class="event-personal"></span>My Events</li>


                <div style="clear:both;"><!--fix floats--></div>


            <div style="clear:both;"><!--fix floats--></div>

            <div id="calendar"></div>




PratikPratik (Salesforce Developers) 
Hi Pritam,

You can refer to this post, here you will find the sample code and resources for your requirement.

Joanne ButterfieldJoanne Butterfield
Hi Pritam Shekhawat,
I'm working on the same calendar but not able to reach a high enough test coverage, would you be able to post a copy of your test code?
This is my current code - https://developer.salesforce.com/forums/ForumsMain?id=906F0000000B45q
Thank you in advance!
pavan brundavanam 1pavan brundavanam 1
hi can you please send me the static resource link which u had used in vf
Neha KamraNeha Kamra
Hi Pritam,

We have done the same thing for one of our client. Please add the following code at line 68 in your vf page.

dayClick: function (date, allDay, jsEvent, view) {
var cellYear = date.year();
var cellMonth = date.month() + 1;
var cellDay = date.date();
var t = '0' + date.hours();
var m = date.minutes()+'0';
var s = date.seconds()+'0';
if(t.length>2){ t = date.hours();
m = date.minutes();
var tm = t+':'+m+':'+s;
var tm1 = t+':'+m;
var startDate1 = cellMonth+'/'+cellDay+'/'+cellYear; var startDate = cellYear+'-'+cellMonth+'-'+cellDay; var tme = tConvert(tm1);
var startDateTime = startDate +' '+ tm; startDateTime1 = startDate1 +' '+ tme; window.open("/YourVfPage?date="+startDateTime,"_self");

Vandana Jaiswal 7Vandana Jaiswal 7
When I am using this on communities it works only for admin, however when I login as a customer, the calendar doesn't pull up. I just see the title of the calendar. Not sure what is that I am doing wrong in here.