+ Start a Discussion

Displaying Calendar on Visualforce page

Displaying Calendar on Visualforce page



You can use JQuery Calender Control on VF Page, for this you have to refrence or download JQuery files and include then in your page page.

For help see the link http://jqueryui.com/demos/datepicker/.






public class RepeatCont {

public void next() {

public void prev() {

public repeatCont() {

Date d = system.today(); // default to today
Integer mo = d.month();
String m_param = System.currentPageReference().getParameters().get('mo');
String y_param = System.currentPageReference().getParameters().get('yr');

// allow a month to be passed in on the url as mo=10
if (m_param != null) {
Integer mi = Integer.valueOf(m_param);
if (mi > 0 && mi <= 12) {
d = Date.newInstance(d.year(),mi,d.day());
// and year as yr=2008
if (y_param != null) {
Integer yr = Integer.valueOf(y_param);
d = Date.newInstance(yr, d.month(), d.day());


public List<Month.Week> getWeeks() {
system.assert(month!=null,'month is null');
return month.getWeeks();

public Month getMonth() { return month; }

private void setMonth(Date d) {
month = new Month(d);
system.assert(month != null);

Date[] da = month.getValidDateRange(); // gather events that fall in this month
events = [ select id,subject,description,activitydate,activitydatetime,DurationInMinutes from Event where activitydate >= :da[0] AND activityDate <= :da[1]
order by activitydatetime];

month.setEvents(events); // merge those events into the month class

private void addMonth(Integer val) {
Date d = month.getFirstDate();
d = d.addMonths(val);

private List<Event> events;
private Month month;


//////***** End of Controller*****////



//////***** VF Page*****////

<apex:page controller="repeatCont" id="thePage" >
<apex:stylesheet value="/sCSS/Theme2/default/homeCalendar.css" />

<apex:form id="theForm">
<apex:outputPanel id="theCalendar" >

<div class="mCalendar" style="width:182px;" >
<div class="topLeft" >
<div class="topRight"/>
<div class="body">
<table cellspacing="0" cellpadding="2" border="0">
<tr class="header">
<td><apex:commandLink action="{!prev}" rerender="theCalendar">
<img title="Previous Month" class="prevCalArrow" alt="Previous Month" src="/s.gif" />
<td colspan="5" >
{!month.monthname} {!month.yearname}
<td><apex:commandLink action="{!next}" rerender="theCalendar">
<img title="Next Month" class="nextCalArrow" alt="Next Month" src="/s.gif" />

<th scope="col" class="calDays">Sun</th>
<th scope="col" class="calDays">Mon</th>
<th scope="col" class="calDays">Tue</th>
<th scope="col" class="calDays">Wed</th>
<th scope="col" class="calDays">Thu</th>
<th scope="col" class="calDays">Fri</th>
<th scope="col" class="calDays">Sat</th>

<apex:repeat value="{!weeks}" var="wk" id="foreachWeek">
<tr class="days">
<!-- or highlight -->
<apex:repeat value="{!wk.days}" var="day" id="foreachday">
<td valign="top">
<a class="calActive" href="/00U/c—md0=2008&md3={!day.dayOfYear}" target="_blank"
title="Day View - {!day.date}"> {!day.dayofmonth2}

<div class="bottomLeft"><div class="bottomRight"/></div>

//////***** End of VF Page*****////

Bhaskar ChowdaryBhaskar Chowdary

I wil showing Error in my vf page at Month.Week

please correct this error and send the code


Did find the answer? please share the code than.