How to display Calendar on Visualforce page?

Question

how to display Calendar on Visualforce page.. here i have some logic and i was trying i get some error. Error:invalid type Month.Week on my controller.

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>
<div class="body">
<table cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr class="header">
<td><apex:commandLink action="{!prev}" rerender="theCalendar">
<img title="Previous Month" class="prevCalArrow" alt="Previous Month" src="/s.gif" />
</apex:commandLink>
</td>
<td colspan="5" >
{!month.monthname} {!month.yearname}
</td>
<td><apex:commandLink action="{!next}" rerender="theCalendar">
<img title="Next Month" class="nextCalArrow" alt="Next Month" src="/s.gif" />
</apex:commandLink>
</td>
</tr>
<tr>
<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>
</tr>
<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}
</a>
</td>
</apex:repeat>
</tr>
</apex:repeat>
</tbody>
</table>
</div>
<div class="bottomLeft"><div class="bottomRight"/></div>
</div>
</apex:outputPanel>
</apex:form>
</apex:page>

Controller:

public class RepeatCont {
public void next() {
addMonth(1);
}
public void prev() {
addMonth(-1);
}
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());
}
setMonth(d);
}
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);
setMonth(d);
}
private List<Event> events;
private Month month;
}

Any one help me how to solve the issue?

Answer 1

There are different ways to do this.

1st. You have to simply use apex:inputfield and bind the field with date type field and it will automatically take the Sales force Calander.Try the below as Reference:

<apex:page standardcontroller=’Account’>
    <apex:form>
    <apex:inputfield value=”{!Account.DateTypeField}”
    </apex:form>
    </apex:page>

2nd. You can use tag to achieve this:

    <apex:page standardcontroller=’Account’ id=”mypage”>
    <apex:form id=”myform”>
    <apex:inputText styleClass="cssbody" value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, 'myPage:myForm:demo', false);" />
   </apex:form>
</apex:page>

3rd .

<apex:page >
<apex:form >
<table>
<!-- <input id="demo3" type="text" size="25"><a href="javascript&colon;NewCal('demo3','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a> -->
<!-- NewCal([textbox id],[date format],[show time in calendar?],[time mode (12,24)?]) -->
<td> Date<br></br><input id="t" name="datee" onfocus="DatePicker.pickDate(false,
't', false);" size="12" tabindex="28" type="text" /><span class="dateFormat">[&nbsp;<a
href="javascript&colon;DatePicker.insertDate('2/3/2011', 't', true);"
>2/3/2011</a>&nbsp;]</span></td>
</table>
</apex:form>
</apex:page>

or you can also do it with html 5.0

<apex:page docType="html-5.0" controller="Sample">
<apex:form >
    <apex:pageBlock >
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                Date: <apex:input type="date" value="{!dat}"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

Apex Controller:

public class Sample {
    public Date dat {get;set;}
    public Sample() {

    }
}

Answer 2

Create 'eventItem' and 'Month' apex classes in your organization.

public class eventItem {
public Event ev;
public String formatedDate; 
public eventItem(Event e) { 
    ev= e;
    Datetime endd = e.activitydatetime.addMinutes(e.DurationInMinutes);
            formatedDate = e.activitydatetime.format('h:mm a') + 
    ' - ' + endd.format('h:mm a');
    system.debug(formateddate);
}
public Event getEv() { return ev; }
public String getFormatedDate() { return formatedDate; }

}

public class Month {
private List<Week> weeks; 
public Date firstDate; 
private Date upperLeft; 

public List<Date> getValidDateRange() { 
    List<Date> ret = new List<Date>();
    ret.add(upperLeft);
    ret.add(upperLeft.addDays(5*7) );
    return ret;
}

public String getMonthName() { 
    return DateTime.newInstance(firstDate.year(),firstdate.month(),firstdate.day()).format('MMMM');
} 

public String getYearName() { 
    return DateTime.newInstance(
    firstDate.year(),firstdate.month(),firstdate.day()).format('yyyy');
} 

public String[] getWeekdayNames() { 
    Date today = system.today().toStartOfWeek();
    DateTime dt = DateTime.newInstanceGmt(today.year(),today.month(),today.day());      
    list<String> ret = new list<String>();
    for(Integer i = 0; i < 7;i++) { 
        ret.add( dt.formatgmt('EEEE') );
        dt= dt.addDays(1);
    } 
    return ret;
}

public Date getfirstDate() { return firstDate; } 

public Month( Date value ) {
    weeks = new List<Week>();
    firstDate = value.toStartOfMonth();
    upperLeft = firstDate.toStartOfWeek();
    Date tmp = upperLeft;
    for (Integer i = 0; i < 5; i++) {
        Week w = new Week(i+1,tmp,value.month());   
        system.assert(w!=null); 
        this.weeks.add( w );
        tmp = tmp.addDays(7);
    }

}

public void setEvents(List<Event> ev) { 
    for(Event e:ev) { 
        for(Week w:weeks) { 
            for(Day c: w.getDays() ) { 
                if ( e.ActivityDate.isSameDay(c.theDate))  { 
                    // add this event to this calendar date
                    c.eventsToday.add(new EventItem(e));
                    // add only three events, then a More... label if there are more
                } 
            } 
        } 
    }
}

public List<Week> getWeeks() { 
    system.assert(weeks!=null,'could not create weeks list');
    return this.weeks; 
}

public class Week {
 public List<Day> days;
 public Integer weekNumber; 
 public Date startingDate; // the date that the first of this week is on
 // so sunday of this week

 public List<Day> getDays() { return this.days; }

 public Week () { 
    days = new List<Day>();     
 }
 public Week(Integer value,Date sunday,Integer month) { 
    this();
    weekNumber = value;
    startingDate = sunday;
    Date tmp = startingDate;
    for (Integer i = 0; i < 7; i++) {
        Day d = new Day( tmp,month ); 
        tmp = tmp.addDays(1);
        d.dayOfWeek = i+1;          
        days.add(d);
    } 

 }
 public Integer getWeekNumber() { return this.weekNumber;}
 public Date getStartingDate() { return this.startingDate;}

}

public class Day {

    public Date         theDate;
    public List<EventItem>  eventsToday; 
    public Integer      month, dayOfWeek;
    public String       formatedDate;  
    private String      cssclass = 'calActive';

    public Date         getDate() { return theDate; }
    public Integer      getDayOfMonth() { return theDate.day(); }
    public String       getDayOfMonth2() { 
        if ( theDate.day() <= 9 ) 
            return '0'+theDate.day(); 
        return String.valueof( theDate.day()); 
    }
    public Integer getDayOfYear() { return theDate.dayOfYear(); }
    public List<EventItem>  getDayAgenda() { return eventsToday; }
    public String       getFormatedDate() { return formatedDate; }
    public Integer      getDayNumber() { return dayOfWeek; }
    public List<EventItem>  getEventsToday() { return eventsToday; }
    public String       getCSSName() {  return cssclass; }

    public Day(Date value,Integer vmonth) { 
        theDate=value; month=vmonth;        
        formatedDate = '12 21 08';// time range..
        //9:00 AM - 1:00 PM
        eventsToday = new List<EventItem>();  
        // three possible Inactive,Today,Active  
        if ( theDate.daysBetween(System.today()) == 0 ) cssclass ='calToday';
        // define inactive, is the date in the month?
        if ( theDate.month() != month) cssclass = 'calInactive';
    }

}

}