fullcalendar how to generate a calendar by organizing the days

Question

fullcalendar how to generate a calendar by organizing the days

Navigation

#1 by (1 votes)

0

I am working with the fullCalendar library and I would like to organize the days of the week following the following pattern.

That means that every hour of the day is subdivided into 3 parts. Is it possible to carry it out?.

I just started working with this library and for the moment I configured the following.

 
 $(document).ready(function() {
    $('#calendar').fullCalendar({
    	header: {
        	left: 'prev,next today',
        	center: 'title',
        	right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2018-11-11',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        weekend: true,
        minTime: '09:00:00',
        maxTime: '15:00:00',
        /*Click: function() {
    		
  		  }*/
    });
});

Thank you very much.

javascript jquery fullcalendar

asked by marcos vasquez 22.11.2018 в 19:05

source

1 answer

Convert from int to char in C Remove div created dynamically with JQUERY in SHAREPOINT 2013

score 1 · Accepted Answer

As I mentioned in the comments, the spaces you want to fill in with the 20-minute intervals are usually used to specify each event in FullCalendar; An alternative is the following:

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  lang: 'es',
  weekends: false,
  columnFormat: 'dddd',
  //dayNames: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'],
  header: {
        	left: 'prev,next today',
        	center: 'title',
        	right: 'month,agendaWeek,agendaDay'
        },
  defaultDate: '2018-11-11',
  editable: true,
  eventLimit: true,
  weekend: true,
  allDaySlot: false,
  minTime: '09:00:00',
  maxTime: '15:00:00',
  slotDuration: '00:20:00',
  slotLabelInterval : '00:20:00',
  events:[
    {
      title: 'Titulo Evento',
      start: '2018-11-11T09:00:55.008',
      end: '2018-11-11T09:15:55.008'
    }
  ]
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" id="calendar"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale/es.js"></script>

You specify each 20-minute interval with the property slotLabelInterval and you're done! Obviously if you want to remove the text from the intervals you should only comment on that line or delete it.

Likewise the property in charge of "splitting" every hour in N intervals is slotDuration

Now if you want to remove the weekends you should only set the property weekends in false .

And in order for the calendar to remain in Spanish, you must include the es.js file in your code. And set columnFormat in dddd format

You tell us if your friend serves you