4
전체 캘린더에는 근무 시간 기능에 대한 옵션이 없습니다 (하루 종일의 일정보기에서 첫 번째 행과 마지막 행을 선택 - 예를 들어 회사가 작동하지 않는 곳). 내가 그런 식으로 관리 :근무 시간 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은 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를 사용하지 않는가? 그리고 ... 어떻게