Home / Questions / 3646
Accepted
Luis Alberto Aguilera Clarke
Asked: 2020-02-04 21:10:28 +0800 CST 2020-02-04 21:10:28 +0800 CST

How to color the working hours with fullcalendar?

  • 772

Dear, I have a big problem. I am making a time reservation system, therefore I am using fullcalendar.ioa fairly complete library.

What I need to do is: How to color a light green or transparent green, certain times of the week on a regular basis. As if to show that those hours are available.

For that I added an event but in fullcalendar it does not support periodic events (repeating every Monday). I need to only color the available hours with a start time, end time and the day of the week.

Is it possible to do that?

$('#calendario').fullCalendar({
      defaultView: 'agendaWeek',
      allDaySlot: false,
      header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      dayClick: function(date, jsEvent, view) {
        //alert('Clicked on: ' + date.format());
        $("#hora_seleccionada").html(date.format("MM/DD/YYYY, h:mm:ss"));

      }
    });
javascript

2 Answers

  1. Fullcalendar has a similar feature built in, but it works the other way around what you want. That is, it colors the non-working hours.

    The businessHours property sets the time range and days of the week that you want to highlight differently (non-business hours).

    This does not create fullcalendar events, it is just to show which hours are working and which are not.

    To change the colors, you must modify the style .fc-nonbusinessfor non-working days

    Unfortunately, it only allows you to configure the same pattern for each day of the week that is working.

    This must be added to the fullcalendar initialization:

    businessHours: {
  start: '10:00', // hora final
  end: '18:00', // hora inicial
  dow: [ 1, 2, 3, 4, 5 ] // dias de semana, 0=Domingo
}

    Full example:

    $(function() {
  $('#calendar').fullCalendar({
      defaultView: 'agendaWeek',
      allDaySlot: false,
      header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      businessHours: {
        start: '10:00', // hora final
        end: '18:00', // hora inicial
        dow: [ 1, 2, 3, 4, 5 ] // dias de semana, 0=Domingo
      },
      dayClick: function(date, jsEvent, view) {
        $("#hora_seleccionada").html(date.format("MM/DD/YYYY, h:mm:ss"));
      }
  });
});
    @import "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css";

.fc-nonbusiness {
  background: #90EE90  
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.js"></script>

<div id='hora_seleccionada'></div>
<hr>
<div id='calendar'></div>

    • 5
  2. Best Answer

    I found a new way to this solution: Although businessHours works I had another problem which was to add an array of businessHours and it also works in the opposite way as my problem was stipulated.

    I found this issue on main Stack Overflow: https://stackoverflow.com/questions/30977505/how-to-add-multiple-business-hours-in-fullcalendar

    What I did was add a light green event with opacity:

    events: [
    {
        start: '00:00:00+02:00',
        end: '08:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [1,2,3,4,5]
    },

    {
        start: '16:00:00+02:00',
        end: '24:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [1,2,3,4,5]
    },

    {
        start: '00:00:00+02:00',
        end: '8:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [6]
    },

    {
        start: '12:00:00+02:00',
        end: '24:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [6]
    }
]

    Thanks @rnrneverdies for clarifying my doubts

    • 0