NlsCalendar Professional
addobject.com
Custom Special Event
NlsCalendar Professional - Advanced Calendar Control
   

Special event is similar to special day, except you could have more information associated with event. You have 2 options of special event:

  • URL, specifies url and attributes in this event. Date with special event will be rendered as hyperlink.
  • Custom Event, can be any custom information. Calendar doesn't displays custom event automatically since it is user defined event. You can use onChange event to get the selected event and display it.
Special event in calendar is diplayed with special style. The style is configured in stylesheet.

The following is the example of custom special event. When the special event is clicked, the event will be dislayed in the box next to the calendar. Date with small arrow at the bottom right corner is date with special event.

  • The calendar mode is fixed (1) / flat calendar.
  • Special event in this example:
    • Every first day of the month.
    • Every 14th (url type).
    • March 20, 2007
    • April 25, 2007
    • May 12, 2007
    • June 06, 2007
    • July 21, 2007
    • Every August 16

Example code:


                //creates the calendar.
                <script>
                  function EventItem(type, desc, start, end, url) {
                    this.type=type;
                    this.desc=desc;
                    this.start=start;
                    this.end=end;
                    this.url=url;
                  };

                  function _onDateChange() {
                    var s="<table cellspacing='1' cellpadding='3'>";
                    s+="<tr style='background-color:#000000;color:#ffffff'><td>Type</td><td>Description</td><td>Start</td><td>End</td><td>Detail</td></tr>";
                    var ev=this.getSelEvent();
                    if(ev) {
                      for(var i=0;i<ev.length;i++) {
                        s+="<tr><td style='border-bottom:#999999 1px dotted'>"+ev[i].type+"</td>";
                        s+="<td style='border-bottom:#999999 1px dotted'>"+ev[i].desc+"</td>";
                        s+="<td style='border-bottom:#999999 1px dotted'>"+ev[i].start+"</td>";
                        s+="<td style='border-bottom:#999999 1px dotted'>"+ev[i].end+"</td>";
                        s+="<td style='border-bottom:#999999 1px dotted'><a href='"+ev[i].url+"'>detail</a></td></tr>";
                      }
                    }
                    s+="</table>";
                    document.getElementById("eventViewer").innerHTML=s;
                  }


                  var cal=new AOCalendar("cal1");
                  cal.opt.themeDir="../themes/default/";
                  cal.opt.mode=1;
                  cal.opt.showAdjcDates=true;
                  cal.opt.dtFormat="$dm/$dd/$YY";
                  cal.dtEvents={
                  "XXXX-XX-01":new AOCalendar.CEvent(null, null, [new EventItem("Appointment","Regular monthly meeting", " ", " ", "http://www.addobject.com")]),
                  "XXXX-XX-14":new AOCalendar.CEvent("loadevent.htm", "target='_blank'", null),
                  "2007-03-20":new AOCalendar.CEvent(null, null, [new EventItem("Appointment","Meeting with customer, XXL Inc.", "03/20/2007 09:00", "03/20/2007 10:00", "http://www.addobject.com"),
                                                           new EventItem("Appointment","Project discussion with team.", "03/20/2007 13:00", "03/20/2007 15:00", "http://www.addobject.com")
                               ]),
                  "2007-04-25":new AOCalendar.CEvent(null, null, [new EventItem("Appointment","Meeting with customer, ZXC Inc.", "04/25/2007 10:00", "04/25/2007 12:00", "http://www.addobject.com")]),
                  "2007-05-12":new AOCalendar.CEvent(null, null, [new EventItem("Task","Develop Custom Module.", "05/12/2007 08:00", "05/12/2007 17:00", "http://www.addobject.com")]),
                  "2007-06-06":new AOCalendar.CEvent(null, null, [new EventItem("Task","Unit Testing.", "06/06/2007 08:00", "06/06/2007 17:00", "http://www.addobject.com")]),
                  "2007-07-21":new AOCalendar.CEvent(null, null, [new EventItem("Notes","John probably arrive today afternoon.", " ", " ", "http://www.addobject.com")]),
                  "XXXX-08-16":new AOCalendar.CEvent(null, null, [new EventItem("Anniversary","Rio birthday.", " ", " ", "http://www.addobject.com")])
                  };

                  cal.onChange=_onDateChange;
                  cal.render();

                </script>