0 votes

Hello,
Does anyone knows if
- Is is possible to have a specific background color for bank hilodays like for WE (saturday and Sunday background are light gray)

  • TimeSheet:
    Same as above eg have a specific color for bank holidays to distinguish from working days

Many thanks
Frédéric

asked in Other by (180 points)

2 Answers

+1 vote

Hello for your first case (Agenda) please find a way to doing that into an Efficy 2014 6640

First in efficyCustom.css you must add this code.
The first line is for all cases. the second one is for the specific today highlight.

/* Cas du férié */
.fc-ferie{
    background-color:#a6bbce;
}
/* Cas du férié sur le jour today */
.fc-day.fc-widget-content.fc-thu.fc-today.fc-state-highlight.fc-ferie{
    background-color:#cecca8;
}

Next you need 3 JS :
- js/commands/agendaCmd.js
- js/config/require.config.js
- js/main/agenda.js

into js/commands/agendaCmd.js you must add this fonction loadFerie and update datePrevious() and date next() as below :

define([
    'standard/commands/agendaCmd',
    'jquery',
    'moment',
    'history',
    'datetimepicker',
    'base/browser',
    'base/constants',
    'base/model',
    'classes/commandListener',
    'utils/url'
], function(agendaCmd, $, moment, History, Datetimepicker, Browser, Const, Model, CommandListener, Url) {
    //console.log('dans le nouveau agendaCmd')
    loadFerie()
    function _navigateDate(past) {
        var
            title = $('title').html(),
            detail = Model('detail').toLowerCase(),
            date = parseInt(Model('currentDate'), 10);

        if (detail == 'week' || detail == 'week5')
            date += (past) ? -7 : 7;
        else if (detail == 'day')
            date += (past) ? -1 : 1;
        else if (detail == 'month') {
            date = moment.delphi(date);
            date.add('months', (past) ? -1 : 1);
            date = date.toDelphiDate();
        }
        History.setup({basepath:'/efficy.dll/'});
        history.pushState(null, title, Url.setArguments({'date': date}));
        Model.set('currentDate', date);
    }


    function changeView(toView){
        Browser.navigate(Url.setArguments({'date': Model('currentDate'), 'detail': toView}));
    }

    function changeList(hasList){
        Browser.navigate(Url.setArguments({'date': Model('currentDate'), listview: hasList}));
    }

    function changePlanning(isPlanning) {
        if (isPlanning === 'T') {
            Browser.navigate(Url.setArguments({'date': Model('currentDate'), detail: 'Day', planview: isPlanning}));
        } else {
            Browser.navigate(Url.setArguments({'date': Model('currentDate'), planview: isPlanning}));
        }
    }

    function datePrevious() {
        _navigateDate(true);
        $('[class^=agenda-detail-area]').each(function() {
            $(this).fullCalendar('prev');
        });
        loadFerie()
    }

    function dateNext() {
        _navigateDate(false);
        $('[class^=agenda-detail-area]').each(function() {
            $(this).fullCalendar('next');
        });
        loadFerie()
    }

    function loadFerie() {
        var DatesF = Model('ferie') 
        //console.log(DatesF)
        var ToUpdate = DatesF.split(',');
                for (i=0;i<ToUpdate.length;i++){
                //console.log(ToUpdate[i])
                $($('.fc-widget-content').find('td[class^="fc-day"]').filter('td[data-date^="'+ToUpdate[i]+'"]')).each(function(index, obj) {
                    $(this).addClass("fc-ferie")
                });
            }
    }

    agendaCmd.commands.set({dateSelect: dateSelect,
        datePrevious: datePrevious,
        dateNext: dateNext,
        changeView: changeView,
        changeList: changeList,
        changePlanning: changePlanning,
        loadFerie: loadFerie
    });

    return agendaCmd;

});

Into js/main/agenda.js you must load your overwriting CSS on each event like on change planning view etc. as bellow

define([
    'domReady!',
    'modelFilled!',
    'jquery',
    'class',
    'base/model',
    'utils/format',
    'desktop/desktop',
    'agenda/main',
    'commands/agendaCmd'
], function(doc, modelFilled, $, Class, Model, format, Desktop, Agenda, AgendaCmd) {

    var agenda = new (Class.extend({

        start: function () {
            Desktop.start();
            AgendaCmd.start();
            this.Agenda = new Agenda();

            var agendaDetailAreaClass = 'agenda-detail-area';

            if (Model('relentity') && Model('relkey')) {
                this.Agenda.start('.' + agendaDetailAreaClass,
                    format('entityagenda?_macrofile=MacroAgenda&_macro=JsonAgendaMeetings&entity={relentity}&key={relkey}&active=true&explodegroup=true&subentities=T'));
            }
            else if (Model('planningView') && !(!Model('listView') && Model('detail').toLowerCase() === 'day')) {
                console.log(Model('userIdList'))
                var
                    users = Model('userIdList').split(/;/g),
                    $agendaDetailContent = $('#agenda-detail-content');
                    console.log(users)

                for (var i = 0, len = users.length; i < len; i++) {
                    var agendaDetailAreaUserClass = agendaDetailAreaClass;
                    if (i > 0) {
                        agendaDetailAreaUserClass += '-' + i;
                        var $newagendaDetailArea = $('<div></div>', {
                            'class': agendaDetailAreaUserClass
                        });
                        $agendaDetailContent.append($newagendaDetailArea);
                    }
                    this.Agenda.start('.' + agendaDetailAreaUserClass,
                        format('agenda?_macrofile=MacroAgenda&_macro=JsonAgendaMeetings&entity=Appo&active=true&explodegroup=true&user=$0&planview={planningView}', users[i]));
                        loadFerie() 
                }
            }
            else {
                this.Agenda.start('.' + agendaDetailAreaClass,
                    format('agenda?_macrofile=MacroAgenda&_macro=JsonAgendaMeetings&entity=Appo&active=true&explodegroup=true&user={userIdList}&planview={planningView}'));
                    loadFerie() 
            }
        },

        stop: function () {
            this.Agenda.stop();
            AgendaCmd.stop();
        }

    }))();

    // Auto start when loaded via data-main
    agenda.start();
    loadFerie() 
    return agenda;

});

function loadFerie() {
        var DatesF = Model('ferie') 
        //console.log('loadferieragenda'+DatesF)
        var ToUpdate = DatesF.split(',');
                for (i=0;i<ToUpdate.length;i++){
                //console.log(ToUpdate[i])
                $($('.fc-widget-content').find('td[class^="fc-day"]').filter('td[data-date^="'+ToUpdate[i]+'"]')).each(function(index, obj) {
                    $(this).addClass("fc-ferie")
                });
            }
    }

Into js/config/require.config.js you must overwrite the both files as bellow

require.overrideModule('main/agenda');
require.overrideModule('commands/agendaCmd');

Next you must declare your overwrite into macros/MacroDescktopCustom.txt like that

RequireConfigCustom {[
  <%UseScript('custom/js/config/require.config.js')%>
]}

Finally you must add into your Model the data. To do that you must activate into MacroAgendaCustom.txt the JsonAgendaModelCustom macro.

JsonAgendaModelCustom {[
    ,"ferie": "2016-09-20,2016-09-13,2016-09-22,0"
]}
answered by (285 points)
0 votes

Hello,

In the agenda, this seems to be given by 2 classes :
fc-nonbusiness and fc-bgevent;

Now the question is how to make a day get those classes.
Applying those claases to the timesheet also works

I'll investigate on that

This seems to be an interesting path :
https://fullcalendar.io/docs/event_rendering/Background_Events/

answered by (306 points)
edited by
Welcome to Efficy Overflow, where you can ask questions and receive answers from other members of the community.
1,249 questions
1,519 answers
1,859 comments
328 users