You need to sign in to do that
Don't have an account?
Jonathan Wolff 7
Custom Calendar not working
Hello, I tried to use a calendar component I found on the internet. I have some errors with it, that I cant solve. Could you try it out and tell me what to change?.
Greetings Jonathan
Visualforce:
<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;
}
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;
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';
}
}
Greetings Jonathan
Visualforce:
<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;
}
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;
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';
}
}
I believe you have picked the code from https://salesforce.stackexchange.com/questions/79524/how-to-display-calendar-on-visualforce-page
Have you been able to try the accepted answer's code and see if it works for you? Happy to answer any follow-up queries.
If this information helps, please mark the answer as best.Thank you
yes I tried to use this code and already added the things in the comments in my posted code. Maybe I added it wrong, but I'm not experienced at visualforce. Could you try it?
Thank you for the help
Greetings
Jonathan