{% extends 'att/report/base.html' %} {% load i18n %} {% block tabledata %}
{% endblock tabledata %} {% block calendarhtml %}
{% trans 'menu_group_att_scheduleManagement' %}

{% trans "select_an_employee_to_view_schedule" %}

{% endblock calendarhtml %} {% block search_form_init %} var date = new Date(); var cur = moment(new Date()); var _start = cur.startOf('year').format('YYYY'); var fullStartOfYear = cur.startOf('year').format('YYYY-MM-DD'); var fullEndOfYear = cur.endOf('year').format('YYYY-MM-DD'); $.extend(opts, {where: {start_date: fullStartOfYear, end_date: fullEndOfYear}}); {% endblock %} {% block opts_modify %} var userCols = [ {field:'emp_code', title: "{% trans 'report_column_empCode' %}", sort:true} ,{field:'first_name', title: "{% trans 'report_column_firstName' %}"} ,{field:'dept_name', title: "{% trans 'report_column_departmentName' %}"} ,{field:'area_names', title: "{% trans 'report_column_areaAlias' %}"} ,{field:'last_name', title: "{% trans 'report_column_lastName' %}"} ,{field:'position_name', title: "{% trans 'report_column_positionName' %}"} ]; var _cols = []; $.extend(opts, { cols: [userCols.concat(_cols)] ,method: "get" ,url: "/att/api/empDetailsReport/" }); {% endblock %} {% block calendar_display %} function initializeCalendar() { document.getElementById('userNote')?.remove(); $('#fullcalendar_schedule').fullCalendar({ height: 450 , header: { center: '', right: 'today prev,next' } , buttonText: { today: 'Today' } , isRTL:false , showNonCurrentDates:false , monthNames : [ gettext('fullcal_January'), gettext('fullcal_February'), gettext('fullcal_March'), gettext('fullcal_April') , gettext('fullcal_May'), gettext('fullcal_June'), gettext('fullcal_July'), gettext('fullcal_August') , gettext('fullcal_September'), gettext('fullcal_October'), gettext('fullcal_November'), gettext('fullcal_December') ] , monthNamesShort : [ gettext('fullcal_Jan'), gettext('fullcal_Feb'), gettext('fullcal_Mar'), gettext('fullcal_Apr') , gettext('fullcal_May'), gettext('fullcal_Jun'), gettext('fullcal_Jul'), gettext('fullcal_Aug') , gettext('fullcal_Sep'), gettext('fullcal_Oct'), gettext('fullcal_Nov'), gettext('fullcal_Dec') ] , dayNames : [ gettext('fullcal_Sunday'), gettext('fullcal_Monday'), gettext('fullcal_Tuesday'), gettext('fullcal_Wednesday') , gettext('fullcal_Thursday'), gettext('fullcal_Friday'), gettext('fullcal_Saturday') ] , dayNamesShort : [ gettext('fullcal_Sun'), gettext('fullcal_Mon'), gettext('fullcal_Tue'), gettext('fullcal_Wed') , gettext('fullcal_Thur'), gettext('fullcal_Fri'), gettext('fullcal_Sat') ] , fixedWeekCount: false , editable: false , selectable: true , eventRender: function(event, element) { element.find('.fc-title').html(event.title); } , eventMouseover: function (event) { $(this).popover({ title: event.timeIntervalAlias, trigger: 'hover', placement: "top", atMouse: true, container: '#fullcalendar_schedule' }).popover('show'); } , eventMouseout: function (event, jsEvent, view) { $(this).popover({}).popover('hide') } }); } function show_calendar(obj, events) { employee_code = obj.data.emp_code emp_id = obj.data.id obj = obj.data start_date_ = obj.start_date end_date_ = obj.end_date start_date_D = new Date(start_date_); end_date_D = new Date(end_date_); $('#fullcalendar_schedule').fullCalendar('removeEvents'); // $('#fullcalendar_schedule').fullCalendar( 'destroy' ); $('#fullcalendar_schedule').fullCalendar('gotoDate', start_date_); $("#fullcalendar_schedule").fullCalendar('addEventSource', events); let years = [] var currentDate = $('#fullcalendar_schedule').fullCalendar('getDate'); var currentYear = currentDate.year(); years.push(currentYear) function get_newYear_events(year){ startDate = year+'-01-01' endDate = year+'-12-31' $.ajax({ type: "GET", url: "/att/api/empCalendarReport/?page=1&page_size=100&start_date="+ startDate + "&end_date="+endDate + "&employees=" + emp_id, success: function(data){ timeIntervalAliases = data.data[0].time_interval_aliases events = get_events(data.data[0], timeIntervalAliases) $('#fullcalendar_schedule').fullCalendar('addEventSource', events, true); } }); } $(".fc-next-button").click( function() { var newDate = $('#fullcalendar_schedule').fullCalendar('getDate'); var newYear = newDate.year(); if (!years.includes(newYear)) { years.push(newYear) get_newYear_events(newYear); } } ); $(".fc-prev-button").click( function() { var newDate = $('#fullcalendar_schedule').fullCalendar('getDate'); var newYear = newDate.year(); if (!years.includes(newYear)) { get_newYear_events(newYear); years.push(newYear) } } ); } {% endblock calendar_display %} {% block search_report_date %} var startDate = $("#{{ model_name }}-search-form input[name='start_date']").val(); startDate = moment(startDate).startOf('year').format('YYYY-MM-DD'); var endDate = moment(startDate).endOf('year').format('YYYY-MM-DD'); {% endblock %} {% block search_form_enddate %} {% endblock %} {% block search_form_startdate %} {% endblock search_form_startdate %} {% block fullcalendarJs_events %} function get_events(data, timeIntervalAliases) { var events = []; regex= /^[0-9]{8}$/; var holiday = data['holidays'] var holidays = Object.keys(holiday).map(key => key.split('-').join("")); let weekend = data['weekends'].map(date => date.split('-').join("")); for (var i in data) { if (!regex.test(i)) { continue } let event = { title: data[i], start: i, allDay: true, dayMaxEvents: true, } if (data[i] == 'Weekoff') { event.timeIntervalAlias = event.title event.color = 'green'; events.push(event); continue; } if (holidays.includes(i) && (!weekend.includes(i))) { event.timeIntervalAlias = event.title event.color = '#a93ac4'; events.push(event); continue; } let times = data[i].split(","); times.forEach((date, index) => { let title = date if(date.includes('+')) { title = date.split("+")[0] + ' +' + date.split("+")[1] + '' } let event = { title:title , start: i, allDay: true, dayMaxEvents: true, timeIntervalAlias: timeIntervalAliases[i][index], backgroundColor: '#3788d8' }; events.push(event); }); } return events } {% endblock fullcalendarJs_events %} {% block checkbox %} table.on('row({{model_name}})', function(obj) { $("#id_shift_detail_empschedule .layui-card-header").text("Employee: " +obj.data.first_name); emp_id = obj.data.id $.ajax({ type: "GET", url: "/att/api/empCalendarReport/?page=1&page_size=50&start_date="+ fullStartOfYear + "&end_date="+fullEndOfYear + "&employees=" + emp_id , success: function(data){ initializeCalendar(); timeIntervalAliases = data.data[0].time_interval_aliases events = get_events(data.data[0], timeIntervalAliases) show_calendar(obj, events); } }); }); {% endblock checkbox %}