jquery - 全日历工作时间 [解决方案]

Question

完整日历不包含工作时间功能选项(在任何一天的议程 View 中选择第一行和最后一行 - 例如公司不工作)。我做到了类似的事情:

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);
                        }
                    });
                }

其中index.php?r=calendar/Default/worktime是返回json的php文件。看起来像这样:

$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);

最后，一些用于计算和选择工作时间的函数:

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);
    }
}

不要忘记 CSS:

.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 */
    }

所以，我有一些问题 - 是否有另一种方法可以实现相同的效果，但在议程周中不使用绝对 div？和...如何在 viewDisplay 函数中获取实际的 slotMinutes、minTime 和 maxTime

Answer 1

解决转移问题 - 将函数替换为:

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);
    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);
    var dayname = collClass.slice(3);
    var dayNo;
    switch(dayname){
        case 'mon': dayNo=0; break;
        case 'tue': dayNo=1; break;
        case 'wed': dayNo=2; break;
        case 'thu': dayNo=3; break;
        case 'fri': dayNo=4; break;
        case 'sat': dayNo=5; break;
        case 'sun': dayNo=6; break;
    }
    $('.'+cellClass+''+startRowNo+''+collClass)
    .css('margin-left',
        $('.fc-content').find('.fc-view-agendaWeek')
        .find('.fc-slot'+ startRowNo).position().left + (width + 1) * dayNo);
}

}

尚不支持不连续的日常工作时间。您每天只能使用一段工作时间。