scinote-web/app/assets/javascripts/dashboard/calendar.js

89 lines
3.1 KiB
JavaScript
Raw Normal View History

2020-02-19 22:57:06 +08:00
/* global I18n */
2020-02-21 00:02:38 +08:00
/* eslint-disable no-underscore-dangle */
2020-02-19 22:57:06 +08:00
var DasboardCalendarWidget = (function() {
function calendarTemplate() {
return `<script id="calendar-template" type="text/template">
<div class="controls">
<div class="clndr-previous-button">
<div class="btn btn-light icon-btn"><i class="fas fa-angle-double-left"></i></div>
</div>
<div class="clndr-title"><%= month %> <%= year %></div>
<div class="clndr-next-button">
<div class="btn btn-light icon-btn"><i class="fas fa-angle-double-right"></i></div>
</div>
</div>
<div class="days-container">
<% _.each(daysOfTheWeek, function(day) { %>
<div class="day-header"><%= day %></div>
<% }); %>
<% _.each(days, function(day) { %>
2020-02-21 00:02:38 +08:00
<% if (day.classes.includes('event')){ %>
<div class="<%= day.classes %>" id="<%= day.id %>">
<div class="event-day" data-toggle="dropdown"><%= day.day %></div>
<div class="dropdown-menu events-container dropdown-menu-right" role="menu">
2020-02-21 17:00:32 +08:00
<div class="title">${I18n.t('dashboard.calendar.due_on')} <%= day.date.format(formatJS) %></div>
2020-02-21 00:02:38 +08:00
<div class="tasks"></div>
</div>
</div>
<% } else { %>
<div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div>
<% } %>
2020-02-19 22:57:06 +08:00
<% }); %>
</div>
</script>`;
}
2020-02-21 00:02:38 +08:00
function getMonthEventsList(date, clndrInstance) {
var getUrl = $('.dashboard-calendar').data('month-events-url');
$.get(getUrl, { date: date }, function(result) {
clndrInstance.setEvents(result.events);
});
}
2020-02-19 22:57:06 +08:00
function initCalendar() {
var dayOfWeek = [
I18n.t('dashboard.calendar.dow.su'),
I18n.t('dashboard.calendar.dow.mo'),
I18n.t('dashboard.calendar.dow.tu'),
I18n.t('dashboard.calendar.dow.we'),
I18n.t('dashboard.calendar.dow.th'),
I18n.t('dashboard.calendar.dow.fr'),
I18n.t('dashboard.calendar.dow.sa')
];
2020-02-21 00:02:38 +08:00
var clndrInstance = $('.dashboard-calendar').clndr({
2020-02-19 22:57:06 +08:00
template: $(calendarTemplate()).html(),
daysOfTheWeek: dayOfWeek,
2020-02-21 00:02:38 +08:00
forceSixRows: true,
clickEvents: {
click: function(target) {
var getDayUrl = $('.dashboard-calendar').data('day-events-url');
if ($(target.element).hasClass('event')) {
$.get(getDayUrl, { date: target.date._i }, function(result) {
$(target.element).find('.tasks').html(result.html);
});
}
},
onMonthChange: function(month) {
getMonthEventsList(month._d, clndrInstance);
}
}
2020-02-19 22:57:06 +08:00
});
2020-02-21 00:02:38 +08:00
getMonthEventsList((new Date()), clndrInstance);
2020-02-19 22:57:06 +08:00
}
return {
init: () => {
if ($('.current-tasks-widget').length) {
initCalendar();
}
}
};
}());
$(document).on('turbolinks:load', function() {
DasboardCalendarWidget.init();
});