Background color on calendar-specific days and times

Question

Background color on calendar-specific days and times

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I have this calendar as shown in the image:

HeintendedthateveryTuesdayfrom2:30p.m.to5:30p.m.andThursdaysfrom10:30p.m.to12:00p.m.wouldappeartohaveadifferentbackgroundcolorcomparedtotherestofthedays.Thisisthecalendarcode:

<script>$(document).ready(function(){vardate=newDate();varyyyy=date.getFullYear().toString();varmm=(date.getMonth()+1).toString().length==1?"0"+(date.getMonth()+1).toString() : (date.getMonth()+1).toString();
       var dd  = (date.getDate()).toString().length == 1 ? "0"+(date.getDate()).toString() : (date.getDate()).toString();
       var dia = yyyy+"-"+mm+"-"+dd;
        $('#calendar').fullCalendar({
            header: {
                language: 'PT',
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek',

            },
            defaultDate: dia,
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            selectable: true,
            selectHelper: true,
            select: function(start, end) {

                $('#ModalAdd #start').val((start).format('YYYY-MM-DD HH:mm:ss'));
                $('#ModalAdd #end').val((end).format('YYYY-MM-DD HH:mm:ss'));
                $('#ModalAdd').modal('show');
            },
            eventRender: function(event, element) {
                element.bind('dblclick', function() {
                    $('#ModalEdit #id').val(event.id);
                    $('#ModalEdit #title').val(event.title);
                    $('#ModalEdit #nome').val(event.nome);
                    $('#ModalEdit #contact').val(event.contact);
                    $('#ModalEdit #color').val(event.color);
                    $('#ModalEdit #start').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
                    $('#ModalEdit #end').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));                  
                    $('#ModalEdit').modal('show');
                });
            },
            eventDrop: function(event, delta, revertFunc) { // si changement de position

                edit(event);

            },
            eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

                edit(event);

            },
            events: [
            <?php foreach($events as $event): 

                $start = explode(" ", $event['start']);
                $end = explode(" ", $event['end']);
                if($start[1] == '00:00:00'){
                    $start = $start[0];
                }else{
                    $start = $event['start'];
                }
                if($end[1] == '00:00:00'){
                    $end = $end[0];
                }else{
                    $end = $event['end'];
                }
            ?>
                {
                    id: '<?php echo $event['id']; ?>',
                    title: '<?php echo $event['title']; ?>',
                    nome: '<?php echo $event['nome']; ?>',
                    contact: '<?php echo $event['contact']; ?>',
                    start: '<?php echo $start ?>',
                    end: '<?php echo $end ?>',
                    color: '<?php echo $event['color']; ?>',
                },
            <?php endforeach; ?>
            ]
        });

        function edit(event){
            start = event.start.format('YYYY-MM-DD HH:mm:ss');
            if(event.end){
                end = event.end.format('YYYY-MM-DD HH:mm:ss');
            }else{
                end = start;
            }

            id =  event.id;

            Event = [];
            Event[0] = id;
            Event[1] = start;
            Event[2] = end;

            $.ajax({
             url: './updatehoradataeventoLar',
             type: "POST",
             data: {Event:Event},
             success: function(rep) {
                    if(rep == 'OK'){
                        alert('Atividade Guardada correctamente');
                    }else{
                        alert('Tente novamente!'); 
                    }
                }
            });
        }

    });

</script>

html jquery fullcalendar

asked by anonymous 10.09.2018 / 11:49

2 answers

2

You need to generate the event and add the rendering: 'background' property, this will make it have a different background.

To set the color you want, override the "fc-bgevent" class. Example:

events: [
    {
      title: 'teste',
      start: '2018-09-10T10:00:00',
      end: '2018-09-10T16:00:00',
      rendering: 'background'
    }
  ]

And the css:

.fc-bgevent {
  background-color: yellow
}

Here's a working example: link

And here's the documentation: link

10.09.2018 / 14:45

Display only results that satisfy the condition within the loop How to compare all the values of an array with a variable

score 1 · Accepted Answer

With the help of Ricardo Pontual I was able to solve my problem in the following way:

$('#calendar').fullCalendar({
            defaultView: 'agendaWeek',
            businessHours: [ // specify an array instead
  {
    dow: [ 2 ], // Monday, Tuesday, Wednesday
    start: '14:30', // 8am
    end: '17:30' // 6pm
  },
  {
    dow: [ 4 ], // Thursday, Friday
    start: '10:30', // 10am
    end: '12:00' // 4pm
  }
],

and then with the following script:

<script language="javascript">
$(function() {

  $('#calendar').fullCalendar({

    businessHours: true
  });

});
</script>

I show the result in the image: Here'sthe link documentation