CalendarViews.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. // wrapped by build app
  2. define("dojox/widget/CalendarViews", ["dijit","dojo","dojox","dojo/require!dojox/widget/Calendar"], function(dijit,dojo,dojox){
  3. dojo.provide("dojox.widget.CalendarViews");
  4. dojo.experimental("dojox.widget.CalendarViews");
  5. dojo.require("dojox.widget.Calendar");
  6. dojo.declare("dojox.widget._CalendarMonth", null, {
  7. // summary: Mixin class for adding a view listing all 12 months of the year to the
  8. // dojox.widget._CalendarBase
  9. constructor: function(){
  10. // summary: Adds a dojox.widget._CalendarMonthView view to the calendar widget.
  11. this._addView(dojox.widget._CalendarMonthView);
  12. }
  13. });
  14. dojo.declare("dojox.widget._CalendarMonthView", [dojox.widget._CalendarView, dijit._Templated], {
  15. // summary: A Calendar view listing the 12 months of the year
  16. // templateString: String
  17. // The template to be used to construct the widget.
  18. 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"),
  19. // datePart: String
  20. // Specifies how much to increment the displayed date when the user
  21. // clicks the array button to increment of decrement the view.
  22. datePart: "year",
  23. // headerClass: String
  24. // Specifies the CSS class to apply to the header node for this view.
  25. headerClass: "dojoxCalendarMonthHeader",
  26. postCreate: function(){
  27. // summary: Constructs the view
  28. this.cloneClass(".dojoxCalendarMonthTemplate", 3);
  29. this.cloneClass(".dojoxCalendarMonthGroupTemplate", 2);
  30. this._populateMonths();
  31. // Add visual effects to the view, if any have been mixed in
  32. this.addFx(".dojoxCalendarMonthLabel", this.domNode);
  33. },
  34. _setValueAttr: function(value){
  35. this.header.innerHTML = value.getFullYear();
  36. },
  37. _getMonthNames: dojox.widget._CalendarMonthYearView.prototype._getMonthNames,
  38. _populateMonths: dojox.widget._CalendarMonthYearView.prototype._populateMonths,
  39. onClick: function(evt){
  40. // summary: Handles clicks on month names
  41. if(!dojo.hasClass(evt.target, "dojoxCalendarMonthLabel")){dojo.stopEvent(evt); return;}
  42. var parentNode = evt.target.parentNode;
  43. var month = parentNode.cellIndex + (parentNode.parentNode.rowIndex * 4);
  44. var date = this.get("value");
  45. // Seeing a really strange bug in FF3.6 where this has to be called twice
  46. // in order to take affect
  47. date.setMonth(month);
  48. date.setMonth(month);
  49. this.onValueSelected(date, month);
  50. }
  51. });
  52. dojo.declare("dojox.widget._CalendarYear", null, {
  53. // summary: Mixin class for adding a view listing 12 years to the
  54. // dojox.widget._CalendarBase
  55. parent: null,
  56. constructor: function(){
  57. // summary: Adds a dojox.widget._CalendarYearView view to the
  58. // dojo.widget._CalendarBase widget.
  59. this._addView(dojox.widget._CalendarYearView);
  60. }
  61. });
  62. dojo.declare("dojox.widget._CalendarYearView", [dojox.widget._CalendarView, dijit._Templated], {
  63. // summary: A Calendar view listing 12 years
  64. // templateString: String
  65. // The template to be used to construct the widget.
  66. 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"),
  67. displayedYears: 6,
  68. postCreate: function(){
  69. // summary: Constructs the view
  70. this.cloneClass(".dojoxCalendarYearTemplate", 3);
  71. this.cloneClass(".dojoxCalendarYearGroupTemplate", 2);
  72. this._populateYears();
  73. this.addFx(".dojoxCalendarYearLabel", this.domNode);
  74. },
  75. _setValueAttr: function(value){
  76. this._populateYears(value.getFullYear());
  77. },
  78. _populateYears: dojox.widget._CalendarMonthYearView.prototype._populateYears,
  79. adjustDate: function(date, amount){
  80. // summary: Adjusts the value of a date. It moves it by 12 years each time.
  81. return dojo.date.add(date, "year", amount * 12);
  82. },
  83. onClick: function(evt){
  84. // summary: Handles clicks on year values.
  85. if(!dojo.hasClass(evt.target, "dojoxCalendarYearLabel")){dojo.stopEvent(evt); return;}
  86. var year = Number(evt.target.innerHTML);
  87. var date = this.get("value");
  88. date.setYear(year);
  89. this.onValueSelected(date, year);
  90. }
  91. });
  92. dojo.declare("dojox.widget.Calendar3Pane",
  93. [dojox.widget._CalendarBase,
  94. dojox.widget._CalendarDay,
  95. dojox.widget._CalendarMonth,
  96. dojox.widget._CalendarYear], {
  97. // summary: The Calendar includes day, month and year views.
  98. // No visual effects are included.
  99. }
  100. );
  101. dojo.declare("dojox.widget.MonthlyCalendar",
  102. [dojox.widget._CalendarBase,
  103. dojox.widget._CalendarMonth], {
  104. // summary: A calendar with only a month view.
  105. _makeDate: function(value){
  106. var now = new Date();
  107. now.setMonth(value);
  108. return now;
  109. }
  110. }
  111. );
  112. dojo.declare("dojox.widget.YearlyCalendar",
  113. [dojox.widget._CalendarBase,
  114. dojox.widget._CalendarYear], {
  115. // summary: A calendar with only a year view.
  116. _makeDate: function(value){
  117. var now = new Date();
  118. now.setFullYear(value);
  119. return now;
  120. }
  121. }
  122. );
  123. });