Arbeitszeit im Vollkalender [Lösung]

n @Full-Kalendern sind keine Optionen für die Arbeitszeitfunktion enthalten (Auswählen der ersten und letzten Zeile in der Agenda-Ansicht für einen beliebigen Tag - in dem in einem Beispiel das Unternehmen nicht arbeitet). Ich habe so etwas geschafft:

viewDisplay: function(view){
                    $.ajax({
                        url: 'index.php?r=calendar/Default/worktime',
                        dataType: 'json',
                        success: function(data){
                            if(view.name=='agendaWeek')
                                selectWorkTime(data, 30, 0, 24, false);
                            else if(view.name=='agendaDay')
                                selectDayWorkTime(data, 30, 0, 24, view, false);
                        }
                    });
                }

Where index.php? R = calendar / Default / worktime gibt die PHP-Datei json zurück. Es sieht so aus

$arr = array(
        'mon' => array('8:00', '17:00'),
        'tue' => array('9:00', '15:00'),
        'wed' => array('9:30', '19:00'),
        'thu' => array('6:00', '14:00'),
        'fri' => array('0:00', '24:00'),
        'sat' => array('9:00', '14:00'),
        'sun' => array()
    );

    foreach ($arr as &$day){
        foreach($day as &$hour){
            $tmp = explode(':', $hour);
            $hour = $tmp[0] * 3600 + $tmp[1] * 60;
        }
    }

    print json_encode($arr);

und am Ende einige Funktionen zum Zählen und Auswählen der Arbeitszeit:

function selectDayWorkTime(timeArray, slotMinutes, minTime, maxTime, viewObject, showAtHolidays){
    var dayname;
    $('.fc-content').find('.fc-view-agendaWeek').find('.fc-agenda-body')
    .children('.fc-work-time').remove();
    $('.fc-content').find('.fc-view-agendaDay')
    .find('.fc-work-time-day').removeClass('fc-work-time-day');
    switch(viewObject.start.getDay()){
        case 1: dayname='mon'; break;
        case 2: dayname='tue'; break;
        case 3: dayname='wed'; break;
        case 4: dayname='thu'; break;
        case 5: dayname='fri'; break;
        case 6: dayname='sat'; break;
        case 0: dayname='sun'; break;
    }
    for(var day in timeArray){
        if(day == dayname){
            if($('.fc-content').find('.fc-view-agendaDay').find('.fc-'+day).attr('class').search('fc-holiday') == -1 || showAtHolidays){
                var startBefore = 0;
                var endBefore = timeArray[day][0] / (60 * slotMinutes) - (minTime * 60) / slotMinutes;
                var startAfter = timeArray[day][1] / (60 * slotMinutes) - (minTime * 60) / slotMinutes;
                var endAfter = (maxTime - minTime) * 60 / slotMinutes - 1;
                for(startBefore; startBefore < endBefore; startBefore++){
                    $('.fc-view-agendaDay').find('.fc-slot'+startBefore).find('div').addClass('fc-work-time-day');
                }
                for(startAfter; startAfter <= endAfter; startAfter++){
                    $('.fc-view-agendaDay').find('.fc-slot'+startAfter).find('div').addClass('fc-work-time-day');
                }
            }
        }
    }
}

function selectWorkTime(timeArray, slotMinutes, minTime, maxTime, showAtHolidays){
    for(var day in timeArray){
        var startBefore = 0;
        var endBefore = timeArray[day][0] / (60 * slotMinutes) - (minTime * 60) / slotMinutes;
        var startAfter = timeArray[day][1] / (60 * slotMinutes) - (minTime * 60) / slotMinutes;
        var endAfter = (maxTime - minTime) * 60 / slotMinutes - 1;
        if(startBefore > endBefore) endBefore = startBefore;
        if(startAfter > endAfter) startAfter = endAfter;
        try{
            selectCell(startBefore, endBefore, 'fc-'+day, 'fc-work-time', false, showAtHolidays);
            selectCell(startAfter, endAfter, 'fc-'+day, 'fc-work-time', true, showAtHolidays);
        }
        catch(e){
            continue;
        }
    }
}

function selectCell(startRowNo, endRowNo, collClass, cellClass, closeGap, showAtHolidays){
    $('.fc-content').find('.fc-view-agendaWeek').find('.fc-agenda-body')
    .children('.'+cellClass+''+startRowNo+''+collClass).remove();
    $('.fc-content').find('.fc-view-agendaDay')
    .find('.fc-work-time-day').removeClass('fc-work-time-day');
    if($('.fc-content').find('.fc-view-agendaWeek').find('.'+collClass).attr('class').search('fc-holiday') == -1 || showAtHolidays){
        var width = $('.fc-content').find('.fc-view-agendaWeek')
        .find('.'+collClass+':last').width();
        var height = 0;
        if(closeGap && (startRowNo != endRowNo)){
            height = $('.fc-content').find('.fc-view-agendaWeek')
            .find('.fc-slot'+ startRowNo).height();
        }
        $('.fc-view-agendaWeek').find('.fc-agenda-body').prepend('<div class="'+cellClass+' '
            + ''+cellClass+''+startRowNo+''+collClass+'"></div>');
        $('.'+cellClass).width(width - 2);
        height += $('.fc-content').find('.fc-view-agendaWeek')
        .find('.fc-slot'+ endRowNo).position().top
        - $('.fc-content').find('.fc-view-agendaWeek')
        .find('.fc-slot'+ startRowNo).position().top;
        $('.'+cellClass+''+startRowNo+''+collClass).height(height);
        $('.'+cellClass+''+startRowNo+''+collClass)
        .css('margin-top',
            $('.fc-content').find('.fc-view-agendaWeek')
            .find('.fc-slot'+ startRowNo).position().top);
        $('.'+cellClass+''+startRowNo+''+collClass)
        .css('margin-left',
            $('.fc-content').find('.fc-view-agendaWeek')
            .find('.'+collClass+':last').offset().left - width / 2);
    }
}

Vergiss CSS nicht:

.fc-work-time-day{
        background-color: yellow;
        opacity: 0.3;
        filter: alpha(opacity=30); /* for IE */
    }

    .fc-work-time{
        position: absolute;
        background-color: yellow;
        z-index:10;
        margin: 0;
        padding: 0;
        text-align: left;
        z-index: 0;
        opacity: 0.3;
        filter: alpha(opacity=30); /* for IE */
    }

Also, ich habe einige Fragen zu - ist der andere Weg, das Gleiche zu machen, aber keine Verwendung von absoluten Divs in agendaWeek? Und ... Wie bekomme ich in der viewDisplay Funktion aktuelle slotMinutes, minTime und maxTime

Antworten auf die Frage(2)

Ihre Antwort auf die Frage