0

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?

  • is it to display date field or what .? could you ellaborate your question – Salesforce developer Jun 11 '15 at 9:58
  • display datefield on visualforce page – fsales572 Jun 11 '15 at 9:59
  • You can use datepicker on visualforce page – Salesforce developer Jun 11 '15 at 10:11
  • ok.....thanq...... – fsales572 Jun 11 '15 at 10:12
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() {

    }
}
  • ReferenceError: DatePicker is not defined I am getting this error. I tried approach 2. – Praveen Biyani Jul 31 '16 at 18:53
0

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';
    }

}

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.