title: Work time in fullcalendar [Solution]
body: <p>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:</p>
  
  <pre><code>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);
                          }
                      });
                  }
  </code></pre>
  
  <p>Where index.php?r=calendar/Default/worktime is php file returning json. It looks like that:</p>
  
  <pre><code>$arr = array(
          'mon' =&gt; array('8:00', '17:00'),
          'tue' =&gt; array('9:00', '15:00'),
          'wed' =&gt; array('9:30', '19:00'),
          'thu' =&gt; array('6:00', '14:00'),
          'fri' =&gt; array('0:00', '24:00'),
          'sat' =&gt; array('9:00', '14:00'),
          'sun' =&gt; array()
      );
  
      foreach ($arr as &amp;$day){
          foreach($day as &amp;$hour){
              $tmp = explode(':', $hour);
              $hour = $tmp[0] * 3600 + $tmp[1] * 60;
          }
      }
  
      print json_encode($arr);
  </code></pre>
  
  <p>and at the end, some functions using for counting and selecting work-time:</p>
  
  <pre><code>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 &lt; endBefore; startBefore++){
                      $('.fc-view-agendaDay').find('.fc-slot'+startBefore).find('div').addClass('fc-work-time-day');
                  }
                  for(startAfter; startAfter &lt;= 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 &gt; endBefore) endBefore = startBefore;
          if(startAfter &gt; 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 &amp;&amp; (startRowNo != endRowNo)){
              height = $('.fc-content').find('.fc-view-agendaWeek')
              .find('.fc-slot'+ startRowNo).height();
          }
          $('.fc-view-agendaWeek').find('.fc-agenda-body').prepend('&lt;div class="'+cellClass+' '
              + ''+cellClass+''+startRowNo+''+collClass+'"&gt;&lt;/div&gt;');
          $('.'+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);
      }
  }
  </code></pre>
  
  <p>Don't forget about CSS:</p>
  
  <pre><code>.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 */
      }
  </code></pre>
  
  <p>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</p>