You need to sign in to do that
Don't have an account?
Pritam 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
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'; //constructor 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'; events.add(bday); } //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'; events.add(campEvent); } //Get my Events if we have selected the correct option if(includeMyEvents){ 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'; events.add(myEvent); } } return null; } public PageReference toggleMyEvents() { if(includeMyEvents){ includeMyEvents = false; } else{ includeMyEvents = true; } pageload(); 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)}" /> <script> //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. $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, events: [ //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}' }, </apex:repeat> ], }); }); </script> <!--some styling. Modify this to fit your needs--> <style> #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;} </style> <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> <div id="cal-legend"> <ul> <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> </ul> <div style="clear:both;"><!--fix floats--></div> </div> <div style="clear:both;"><!--fix floats--></div> <div id="calendar"></div> </apex:form> </apex:outputPanel> </apex:page>
You can refer to this post, here you will find the sample code and resources for your requirement.
https://developer.salesforce.com/forums/ForumsMain?id=906F00000008v1DIAQ
Thanks,
Pratik
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!
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();
}
if(m.length>2){
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");
}