js/CXGN/Calendar.js

   1 /**
   2
   3 =head1 CXGN.Calendar
   4
   5  Simplified handler for Dynarch.Calendar.  The actual Dynarch Calendar will be exported to
   6  the namespace as 'Calendar', whereas this module will be exported as CXGN.Calendar.
   7
   8  Most of the handlers were adapted from the Dynarch demo, although some modifications have
   9  been made in order to use our own default options, which can be found at the top of
  10  the object specification.
  11
  12 =head1 Author
  13
  14  Chris Carpita <ccarpita@gmail.com>
  15
  16 =cut
  17
  18 */
  19
  20 JSAN.use('Dynarch.Calendar');
  21
  22
  23 var CXGN = window.CXGN || {};
  24 CXGN.Calendar = {
  25 /**
  26
  27 =head1 Properties
  28
  29  Universal Options
  30  *stylesheet: Name of stylesheet to import by default
  31  *stylesheetId: Id of link statement in document to stylesheet
  32  *format: default date format that calendar will return
  33
  34  Options for pop-up calendars:
  35  *closeOnSelected:  close pop-up when a date is clicked, true/false
  36
  37  Options for non pop-up calendars:
  38  *flatTargetId: Element to change on flat calendar selection
  39  *flatCalendarId: Element that encapsulates flat (static) calendar
  40  *flatDayLimit: # of days within current date that are enabled.
  41
  42 =cut
  43
  44 */
  45         stylesheet: "brown",
  46         stylesheetId: "dynarch_calendar_stylesheet",
  47         format: "%m/%d/%Y",
  48         weekNumbers: false,
  49
  50         //popup calendar options
  51     closeOnSelect: true,
  52
  53         //flat calendar options
  54         flatTargetId: "dynarch_flat_target",
  55         flatCalendarId: "dynarch_flat_calendar",
  56         flatDayLimit: 30,
  57
  58         _init: function() {
  59                 CXGN.Calendar.importStylesheet();
  60         },
  61
  62 /**
  63
  64 =head1 Methods
  65
  66  The following methods are called as: CXGN.Calendar.method();
  67
  68
  69 =head2 importStylesheet(name)
  70
  71  Create a link to the stylesheet in the DOM, if the Id
  72  in CXGN.Calendar.stylesheetId is not present.
  73
  74  Name refers to the stylesheet, default is CXGN.Calendar.stylesheet
  75
  76 =cut
  77
  78 */
  79         importStylesheet: function (name) {
  80                 var existing = document.getElementById(CXGN.Calendar.stylesheetId);
  81                 if(existing && existing.rel) return;
  82                 if(!name) name = CXGN.Calendar.stylesheet;
  83                 if(!/\.css$/.test(name)) name += ".css";
  84                 var linkElem = document.createElement("link");
  85                 linkElem.id = CXGN.Calendar.stylesheetId;
  86                 linkElem.type = "text/css";
  87                 linkElem.rel = "stylesheet";
  88                 linkElem.media = "all";
  89                 linkElem.href = "js/Dynarch/style/" + name;
  90                 document.getElementsByTagName('head')[0].appendChild(linkElem);
  91         },
  92         setupCalendar: function(cal) {
  93                 var forward = ["weekNumbers"];
  94                 for(var i = 0; i < forward.length; i++){
  95                         cal[forward[i]] = CXGN.Calendar[forward[i]];
  96                 }
  97         },
  98 /*
  99
 100 =head2 popupDateSelected(cal obj, date)
 101
 102  Called when a date is selected, added as event handler automatically
 103
 104 =cut
 105
 106 */
 107         popupDateSelected: function (cal, date) {
 108           cal.sel.value = date; // just update the date in the input field.
 109           if(cal.dateClicked && CXGN.Calendar.closeOnSelect) cal.callCloseHandler();
 110         },
 111 /*
 112
 113 =head2 popupCloseHandler(cal obj)
 114
 115  This gets called when the end-user clicks on the _selected_ date,
 116  or clicks on the "Close" button.  It just hides the calendar without
 117  destroying it.
 118
 119 =cut
 120
 121 */
 122         popupCloseHandler: function(cal) {
 123           cal.hide();
 124         //  cal.destroy();
 125           window._dynarch_popupCalendar = null;
 126         },
 127 /*
 128
 129 =head2 showCalendar(id, format, showsTime, showsOtherMonths)
 130
 131  This function shows the calendar under the element having the given id.
 132  It takes care of catching "mousedown" signals on document and hiding the
 133  calendar if the click was outside.
 134
 135  The variable format is a date-format string, like "%m/%d/%Y", which will
 136  show up as the form input when a date is selected. To learn about formatting,
 137  Google "man strftime", or see if there is a manpage on your system.
 138
 139  showsTime can be boolean, or will show 24-hour format if equal to '24'
 140
 141  showsOtherMonths is a boolean that allows display of alternate months
 142
 143 =cut
 144
 145 */
 146         showCalendar: function (id, format, showsTime, showsOtherMonths) {
 147                 var el = document.getElementById(id);
 148                 if (window._dynarch_popupCalendar != null) {
 149                     // we already have some calendar created
 150                         window._dynarch_popupCalendar.hide();
 151                 }
 152                 else {
 153                     // first-time call, create the calendar.
 154                     var cal = new Calendar ( 1, null,
 155                                 CXGN.Calendar.popupDateSelected,
 156                                 CXGN.Calendar.popupCloseHandler );
 157                         CXGN.Calendar.setupCalendar(cal);
 158                     // uncomment the following line to hide the week numbers
 159                     // cal.weekNumbers = false;
 160                     if (showsTime) {
 161                       cal.showsTime = true;
 162                       cal.time24 = (showsTime == "24");
 163                     }
 164                     if (showsOtherMonths) {
 165                       cal.showsOtherMonths = true;
 166                     }
 167                     window._dynarch_popupCalendar = cal;                  // remember it in the global var
 168                     cal.setRange(1900, 2070);        // min/max year allowed.
 169                     cal.create();
 170                 }
 171                 if(!format) format = CXGN.Calendar.format;
 172                 window._dynarch_popupCalendar.setDateFormat(format);    // set the specified date format
 173                 window._dynarch_popupCalendar.parseDate(el.value);      // try to parse the text in field
 174                 window._dynarch_popupCalendar.sel = el;                 // inform it what input field we use
 175
 176           // the reference element that we pass to showAtElement is the button that
 177           // triggers the calendar.  In this example we align the calendar bottom-right
 178           // to the button.
 179 //              window._dynarch_popupCalendar.showAtElement(el.nextSibling, "Br");        // show the calendar
 180                 window._dynarch_popupCalendar.showAtElement(el, "Br");
 181                 return false;
 182         },
 183 /*
 184
 185 =head2 flatIsDisabled(date)
 186
 187  Given a date, determine which days are disabled, from CXGN.Calendar.flatDayLimit
 188
 189 =cut
 190
 191 */
 192         flatIsDisabled: function (date) {
 193                 var today = new Date();
 194                 return
 195                         ( Math.abs(date.getTime() - today.getTime() )
 196                           /
 197                           ( 60*1000*60*24 )  //number  of days difference
 198                            > CXGN.Calendar.flatDayLimit);
 199         },
 200 /*
 201
 202 =head2 flatDateSelected(cal, date)
 203
 204  Action for selection of flat-calendar date
 205
 206 =cut
 207
 208 */
 209         flatDateSelected: function(cal, date) {
 210                 var el = document.getElementById(CXGN.Calendar.flatTargetId);
 211                 el.innerHTML = date;
 212         },
 213 /*
 214
 215 =head2 showFlatCalendar([format])
 216
 217  Shows the flat (non-popup) calendar in the document, under
 218  the element with ID CXGN.Calendar.flatCalendarId
 219
 220  Variable format defaults to '%m/%d/%Y', which will fill the
 221  innerHTML of element with id CXGN.Calendar.flatTargetId
 222
 223 */
 224         showFlatCalendar: function(format) {
 225                 var parent = document.getElementById(CXGN.Calendar.flatCalendarId);
 226
 227                 // construct a calendar giving only the "selected" handler.
 228                 var cal = new Calendar(0, null, CXGN.Calendar.flatDateSelected);
 229                 CXGN.Calendar.setupCalendar(cal);
 230
 231                 // We want some dates to be disabled; see function isDisabled above
 232                 cal.setDisabledHandler(CXGN.Calendar.flatIsDisabled);
 233                 if(!format) format = CXGN.Calendar.format;
 234                 cal.setDateFormat(format);
 235
 236                 // this call must be the last as it might use data initialized above; if
 237                 // we specify a parent, as opposite to the "showCalendar" function above,
 238                 // then we create a flat calendar -- not popup.  Hidden, though, but...
 239                 cal.create(parent);
 240
 241                 // ... we can show it here.
 242                 cal.show();
 243         }
 244 }
 245 CXGN.Calendar._init();