Fullcalendar中的工作时间[解决方案] [英] Work time in fullcalendar [Solution]

查看：107
本文介绍了Fullcalendar中的工作时间[解决方案]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

完整的日历没有包含工作时间功能的选项（选择任何一天的议程视图中的第一行和最后一行 - 示例公司不在工作的地方）。我管理这样的事情： 

  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是php文件返回JSON。它看起来像这样：

  $ arr = array（
'mon'=> array（'8:00 ''，'17：00'），
'tue'=>数组（'9:00'，'15：00'），
'wed'=>数组（'9:30 '，'19：00'），
'thu'=>数组（'6:00'，'14：00'），
'fri'=> array（'0:00' ''，'24：00'），
'sat'=> array（'9:00'，'14：00'），
'sun'=> array（）
）; 
 $ b foreach（$ arr as& $ day）{
 foreach（$ day as& $ hour）{
 $ tmp = explode（'：'，$ hour） ; 
 $ hour = $ tmp [0] * 3600 + $ tmp [1] * 60; 
} 
} 
 
 print json_encode（$ arr）;

以及最后一些用于计算和选择工作时间的函数：

 函数selectDayWorkTime（timeArray，slotMinutes，minTime，maxTime，viewObject，showAtHolidays）{
 var dayname; （'。fc-agenda-body'）
 .children（'。fc-work-时间'）除去（）; （'。fc-view-agendaDay'）
 .find（'。fc-work-time-day'）。removeClass（'fc-work' -time天'）; 
 switch（viewObject.start.getDay（））{
 case 1：dayname ='mon';打破; 
案例2：dayname ='tue';打破; 
案例3：dayname ='wed';打破; 
案例4：dayname ='thu';打破; 
案例5：dayname ='fri';打破; 
案例6：dayname ='sat';打破; 
案例0：dayname ='sun';打破; 
} 
 for（var day in timeArray）{
 if（day == dayname）{
 if（$（'。fc-content'）。find（'。fc （'.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-工作时间一天）; （startAfter; startAfter< = endAfter; startAfter ++）{
 $（'。fc-view-agendaDay'）。find（'。fc-slot'+ startAfter）。
} 
。找到（ 'DIV'）addClass（FC-工作时间一天）。 
} 
} 
} 
} 
} 
 
函数selectWorkTime（timeArray，slotMinutes，minTime，maxTime，showAtHolidays）{
 for（var 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; 
 
 
 
 $ b函数selectCell（startRowNo，endRowNo，collClass，cellClass，closeGap，showAtHolidays）{
 $（'。fc-content '）.find（'。fc-view-agendaWeek'）。find（'.fc-agenda-body'）
 .children（'。'+ cellClass +''+ startRowNo +''+ collClass）.remove ）; （'。fc-view-agendaDay'）
 .find（'。fc-work-time-day'）。removeClass（'fc-work' -time天'）; $（'。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 + '：最后'）宽度（）; 
 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; 
不透明度：0.3; 
 filter：alpha（opacity = 30）; / * for IE * / 
} 
 
 .fc-work-time {
 position：absolute; 
 background-color：yellow; 
 z-index：10; 
保证金：0; 
 padding：0; 
 text-align：left; 
 z-index：0; 
不透明度：0.3; 
 filter：alpha（opacity = 30）; / *为IE * / 
}

所以，我有一些问题 - 是另一种做法，但在议程周期内不使用绝对div？
And ...
我怎样才能得到viewDisplay函数实际的slotMinutes，minTime和maxTime

解决方案

治疗转移 - 替换功能：

pre $ function selectCell （'。fc-agenda-body'）
.children（'。'+ cellClass +'' + startRowNo + '' + collClass）卸下摆臂（）; （'。fc-view-agendaDay'）
.find（'。fc-work-time-day'）。removeClass（'fc-work' -time天'）; $（'。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 + '：最后 '）宽度（）;'。'。
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;打破;
case'tue'：dayNo = 1;打破;
case'wed'：dayNo = 2;打破;
case'thu'：dayNo = 3;打破;
case'fri'：dayNo = 4;打破;
case'sat'：dayNo = 5;打破;
case'sun'：dayNo = 6;打破;

$（'。'+ cellClass +''+ startRowNo +''+ collClass）
.css（'margin-left'，
$（'。fc-content' ）.find（'。fc-view-agendaWeek'）
.find（'.fc-slot'+ startRowNo）.position（）。left +（width + 1）* dayNo）;
}

}

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


Full calendar have no included options to work-time feature (selecting first and last rows in agenda view for any day - where in example company is not working). I managed something like that:

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 is php file returning json. It looks like that:

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

and at the end, some functions using for counting and selecting work-time:

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

Don't forget about 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 */
    }

So, I've got some questions about - is the other way to make the same, but no using absolute div's in agendaWeek? And... How can I get in viewDisplay function actual slotMinutes, minTime and maxTime

解决方案

Cure for shifting - replace function into this:

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

}

Not-continuous daily work time is not supported yet. You must use only one period of work time per day.

这篇关于Fullcalendar中的工作时间[解决方案]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆