CalendarViews.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.widget.CalendarViews"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.widget.CalendarViews"] = true;
  8. dojo.provide("dojox.widget.CalendarViews");
  9. dojo.experimental("dojox.widget.CalendarViews");
  10. dojo.require("dojox.widget.Calendar");
  11. dojo.declare("dojox.widget._CalendarMonth", null, {
  12. // summary: Mixin class for adding a view listing all 12 months of the year to the
  13. // dojox.widget._CalendarBase
  14. constructor: function(){
  15. // summary: Adds a dojox.widget._CalendarMonthView view to the calendar widget.
  16. this._addView(dojox.widget._CalendarMonthView);
  17. }
  18. });
  19. dojo.declare("dojox.widget._CalendarMonthView", [dojox.widget._CalendarView, dijit._Templated], {
  20. // summary: A Calendar view listing the 12 months of the year
  21. // templateString: String
  22. // The template to be used to construct the widget.
  23. templateString: dojo.cache("dojox.widget", "Calendar/CalendarMonth.html", "<div class=\"dojoxCalendarMonthLabels\" style=\"left: 0px;\" \n\tdojoAttachPoint=\"monthContainer\" dojoAttachEvent=\"onclick: onClick\">\n <table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"margin: auto;\">\n <tbody>\n <tr class=\"dojoxCalendarMonthGroupTemplate\">\n <td class=\"dojoxCalendarMonthTemplate\">\n <div class=\"dojoxCalendarMonthLabel\"></div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n"),
  24. // datePart: String
  25. // Specifies how much to increment the displayed date when the user
  26. // clicks the array button to increment of decrement the view.
  27. datePart: "year",
  28. // headerClass: String
  29. // Specifies the CSS class to apply to the header node for this view.
  30. headerClass: "dojoxCalendarMonthHeader",
  31. postCreate: function(){
  32. // summary: Constructs the view
  33. this.cloneClass(".dojoxCalendarMonthTemplate", 3);
  34. this.cloneClass(".dojoxCalendarMonthGroupTemplate", 2);
  35. this._populateMonths();
  36. // Add visual effects to the view, if any have been mixed in
  37. this.addFx(".dojoxCalendarMonthLabel", this.domNode);
  38. },
  39. _setValueAttr: function(value){
  40. this.header.innerHTML = value.getFullYear();
  41. },
  42. _getMonthNames: dojox.widget._CalendarMonthYearView.prototype._getMonthNames,
  43. _populateMonths: dojox.widget._CalendarMonthYearView.prototype._populateMonths,
  44. onClick: function(evt){
  45. // summary: Handles clicks on month names
  46. if(!dojo.hasClass(evt.target, "dojoxCalendarMonthLabel")){dojo.stopEvent(evt); return;}
  47. var parentNode = evt.target.parentNode;
  48. var month = parentNode.cellIndex + (parentNode.parentNode.rowIndex * 4);
  49. var date = this.get("value");
  50. // Seeing a really strange bug in FF3.6 where this has to be called twice
  51. // in order to take affect
  52. date.setMonth(month);
  53. date.setMonth(month);
  54. this.onValueSelected(date, month);
  55. }
  56. });
  57. dojo.declare("dojox.widget._CalendarYear", null, {
  58. // summary: Mixin class for adding a view listing 12 years to the
  59. // dojox.widget._CalendarBase
  60. parent: null,
  61. constructor: function(){
  62. // summary: Adds a dojox.widget._CalendarYearView view to the
  63. // dojo.widget._CalendarBase widget.
  64. this._addView(dojox.widget._CalendarYearView);
  65. }
  66. });
  67. dojo.declare("dojox.widget._CalendarYearView", [dojox.widget._CalendarView, dijit._Templated], {
  68. // summary: A Calendar view listing 12 years
  69. // templateString: String
  70. // The template to be used to construct the widget.
  71. templateString: dojo.cache("dojox.widget", "Calendar/CalendarYear.html", "<div class=\"dojoxCalendarYearLabels\" style=\"left: 0px;\" dojoAttachPoint=\"yearContainer\">\n <table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"margin: auto;\" dojoAttachEvent=\"onclick: onClick\">\n <tbody>\n <tr class=\"dojoxCalendarYearGroupTemplate\">\n <td class=\"dojoxCalendarNextMonth dojoxCalendarYearTemplate\">\n <div class=\"dojoxCalendarYearLabel\">\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n"),
  72. displayedYears: 6,
  73. postCreate: function(){
  74. // summary: Constructs the view
  75. this.cloneClass(".dojoxCalendarYearTemplate", 3);
  76. this.cloneClass(".dojoxCalendarYearGroupTemplate", 2);
  77. this._populateYears();
  78. this.addFx(".dojoxCalendarYearLabel", this.domNode);
  79. },
  80. _setValueAttr: function(value){
  81. this._populateYears(value.getFullYear());
  82. },
  83. _populateYears: dojox.widget._CalendarMonthYearView.prototype._populateYears,
  84. adjustDate: function(date, amount){
  85. // summary: Adjusts the value of a date. It moves it by 12 years each time.
  86. return dojo.date.add(date, "year", amount * 12);
  87. },
  88. onClick: function(evt){
  89. // summary: Handles clicks on year values.
  90. if(!dojo.hasClass(evt.target, "dojoxCalendarYearLabel")){dojo.stopEvent(evt); return;}
  91. var year = Number(evt.target.innerHTML);
  92. var date = this.get("value");
  93. date.setYear(year);
  94. this.onValueSelected(date, year);
  95. }
  96. });
  97. dojo.declare("dojox.widget.Calendar3Pane",
  98. [dojox.widget._CalendarBase,
  99. dojox.widget._CalendarDay,
  100. dojox.widget._CalendarMonth,
  101. dojox.widget._CalendarYear], {
  102. // summary: The Calendar includes day, month and year views.
  103. // No visual effects are included.
  104. }
  105. );
  106. dojo.declare("dojox.widget.MonthlyCalendar",
  107. [dojox.widget._CalendarBase,
  108. dojox.widget._CalendarMonth], {
  109. // summary: A calendar with only a month view.
  110. _makeDate: function(value){
  111. var now = new Date();
  112. now.setMonth(value);
  113. return now;
  114. }
  115. }
  116. );
  117. dojo.declare("dojox.widget.YearlyCalendar",
  118. [dojox.widget._CalendarBase,
  119. dojox.widget._CalendarYear], {
  120. // summary: A calendar with only a year view.
  121. _makeDate: function(value){
  122. var now = new Date();
  123. now.setFullYear(value);
  124. return now;
  125. }
  126. }
  127. );
  128. }