https://diecezja.kalisz.pl/js/3w_calendar.js

1class C3WCalendar {
2
3  constructor(options = null){
4
5    this.o = options ?? {};
6    this.o.font_size ??= '4rem';
7    this.o.id ??= `calendar_${getGUID()}`;
8    this.o.rows_no = +(this.o.rows_no ?? 3);
9    this.o.cols_no = +(this.o.cols_no ?? 3);
10
11    this.set_date = this.o.date ?? null;
12    this.last_date = this.o.date ?? new Date();
13  }
14
15  getWeekDayName(wd, abbr = false){
16    return getWeekdayName(wd, abbr, abbr, abbr);
17  }
18
19  getCalendarTemplate(){
20    let wd = 1;
21    return `
22<div class="cont_3w_calendar">
23  <header>
24    <div class="ctrls">
25      <div class="left arrow svg"><svg><use xlink:href="${url_base}/back/pics/icons16x16.svg#svg-arrow-left"></use></svg></div>
26      <div class="year_month">
27        <span class="curr_month"></span>
28        <span class="curr_year"></span>
29        <div class="today arrow svg"><svg><use xlink:href="${url_base}/back/pics/icons16x16.svg?sid=18#svg-box-caret-left"></use></svg></div>
30      </div>
31      <div class="right arrow svg"><svg><use xlink:href="${url_base}/back/pics/icons16x16.svg#svg-arrow-right"></use></svg></div>
32    </div>
33  </header>
34
35  <ul class="weekdays">
36    <li>
37      <abbr title="${this.getWeekDayName(wd, true)}">${this.getWeekDayName(wd++)}</abbr>
38    </li>
39    <li>
40      <abbr title="${this.getWeekDayName(wd, true)}">${this.getWeekDayName(wd++)}</abbr>
41    </li>
42    <li>
43      <abbr title="${this.getWeekDayName(wd, true)}">${this.getWeekDayName(wd++)}</abbr>
44    </li>
45    <li>
46      <abbr title="${this.getWeekDayName(wd, true)}">${this.getWeekDayName(wd++)}</abbr>
47    </li>
48    <li>
49      <abbr title="${this.getWeekDayName(wd, true)}">${this.getWeekDayName(wd++)}</abbr>
50    </li>
51    <li class="saturday">
52      <abbr title="${this.getWeekDayName(wd, true)}">${this.getWeekDayName(wd++)}</abbr>
53    </li>
54    <li class="sunday">
55      <abbr title="${this.getWeekDayName(wd, true)}">${this.getWeekDayName(wd++)}</abbr>
56    </li>
57  </ul>
58
59  <ol class="day-grid" style="height: calc(100% - 4rem);"></ol>
60</div>`.despace();
61
62  }
63
64  fillDay($day, $filter_section, day_date, flags){
65    $day.html(day_date.getDate());
66    $day.css('font-size', this.o.font_size);
67    $day.addClass('flex justify-center items-center');
68
69    if(flags.month_prev || flags.month_next){
70      $day.css('color', 'var(--gray-400)');
71    }
72  }
73
74  updateCtrl($container, $filter_section, date = null){
75
76    if(date){
77      this.last_date = new Date(date);
78    }
79
80    date = date ?? new Date(this.last_date);
81
82    const today = new Date();
83    const iter_date = new Date(date.getFullYear(), date.getMonth(), 1);
84    const weekday = (iter_date.getDay() + 6) % 7; // niech poniedziałek będzie 0
85
86    iter_date.adjust('days', weekday, true);
87
88
89    $container.empty();
90
91    const $calendar = $(this.getCalendarTemplate());
92
93    $calendar.appendTo($container);
94
95    const $header = $calendar.find('header');
96    const $grid = $calendar.find('.day-grid');
97
98    const $curr_year = $calendar.find('.curr_year');
99    const $curr_month = $calendar.find('.curr_month');
100
101    $curr_year.html(date.getFullYear());
102    $curr_month.html(getMonthName(date.getMonth()));
103
104
105    const createDay = (iter_date, flags = {}) => {
106      const dt = (+php_date('w', iter_date) + 6) % 7;
107      const $day = $('<li/>').attr('day', php_date('Y-m-d', iter_date));
108
109      const day_flags = {
110        month_prev : flags.month_prev,
111        month_next : flags.month_next
112      };
113
114      if(dt == 6){
115        $day.addClass('sunday');
116        day_flags.sunday = true;
117      }
118      else if(dt == 5){
119        $day.addClass('saturday');
120        day_flags.saturday = true;
121      }
122
123      const iter_date_str = php_date('Y-m-d', iter_date);
124
125      if(this.set_date && iter_date_str == php_date('Y-m-d', this.set_date)){
126        $day.addClass('current');
127        day_flags.current = true;
128      }
129
130      if(iter_date_str == php_date('Y-m-d')){
131        $day.addClass('today');
132        day_flags.today = true;
133      }
134
135      $day.appendTo($grid);
136
137      this.fillDay($day, $filter_section, iter_date, day_flags);
138
139      return $day;
140    }
141
142    let dt = 0;
143    for(let i = 0; i < weekday; i++){ // najpierw puste dni początku tygodnia
144      const $day = createDay(iter_date, {month_prev : 1});
145      $day.addClass('month-prev');
146      iter_date.adjust('days', 1, false);
147      ++dt;
148    }
149
150    while(iter_date.getMonth() == date.getMonth()){
151
152      const $day = createDay(iter_date);
153      iter_date.adjust('days', 1, false);
154      ++dt;
155    }
156
157    dt %= 7;
158    if(dt){ // i jeszcze puste dni końca tygodnia (o ile są)
159      while(dt < 7){
160        const $day = createDay(iter_date, {month_next : 1});
161        $day.addClass('month-next');
162        iter_date.adjust('days', 1, false);
163        ++dt;
164      }
165    }
166
167    const updateHandlers = () => {
168      $header.find('.left.arrow').off('click').click(() => {
169        date.adjust('months', 1, true);
170        this.updateCtrl($container, $filter_section, date);
171      });
172
173      $header.find('.right.arrow').off('click').click(() => {
174        date.adjust('months', 1, false);
175        this.updateCtrl($container, $filter_section, date);
176      });
177
178      $header.find('.today.arrow').off('click').click(() => { // wracamy do dzisiaj
179        date = new Date();
180        this.updateCtrl($container, $filter_section, date);
181      });
182
183      $header.find('.curr_month').off('click').click(() => {
184        new CMonthPicker(null, {month: date.getMonth()}, (month) => {
185          date.setMonth(month);
186          this.updateCtrl($container, $filter_section, date);
187        });
188      });
189
190      $header.find('.curr_year').off('click').click(() => {
191        new CYearPicker(null, {year: date.getFullYear(), rows: this.o.rows_no, cols: this.o.cols_no}, (year) => {
192          date.setFullYear(year);
193          this.updateCtrl($container, $filter_section, date);
194        });
195      });
196
197    }
198
199    updateHandlers();
200
201
202  }
203}