Split day agenda in full calendar into 15-minute slots - javascript

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//Random default events
events : <?php echo json_encode($events1);?>,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
i need to split into 15 minutes interval.the default is 30 minutes slots.how can i achieve it thank u in advance

I think you're looking for slotDuration: http://fullcalendar.io/docs/agenda/slotDuration/

Related

Is there a way to access variable from a js function is chrome extension?

So my university have this activity calender in their students portal but it is quite messy, I find this in the page
<script>
$(function () {
/* initialize the calendar
-----------------------------------------------------------------*/
var JsonData = [{"Semester":"Fall 2020","title":"CS602: Assignment# 1","start":"2020,11,27","end":"2020,12,05","backgroundColor":"linea ...
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
events: JsonData,
editable: false,
droppable: false
});
});
</script>
Is there a way to get that JSON in my chrome extension so I can do something with it there? Thanks in advance!

Fullcalendar - Half Hour Event Title Issue

The answer at Fullcalendar event's end time is missing is for an older version of fullcalendar. It's not the answer I want.
In my fullcalendar application, when I create a "half-an-hour" event it just show only event start time and title at week view.
For one hour and longer events, there are no problems I encounter. It only happens at "half-an-hour" events. So, I don't know if this is a feature or not.
I want my events to be displayed like "08:00 - 08:30" (start - end) even for half an hour events.
My code:
var calendar = $('#calendar').fullCalendar({
allDaySlot: false,
eventOverlap: false,
selectOverlap: false,
editable: false,
eventStartEditable: false,
eventDurationEditable: false,
timezone: 'local',
timeFormat: "HH:mm",
minTime: "08:00:00",
maxTime: "20:00:00",
header: header,
selectable: true,
selectHelper: false,
defaultView: "agendaWeek",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
view: {
agendaWeek: {
columnFormat: "M/D [(]ddd[)]"
}
},
select: function(start, end, allDay) {
...
}
eventClick: function(calEvent, jsEvent, view) {
...
}
});
ScreenShot (SS):
Note: Sometimes even event titles cannot be seen in the week view of Fullcalendar.

I cant get data from day where I drop in full calendar

I have this fullcalendar:
$('#calendar').fullCalendar({
height: 700,
locale: 'es',
header: {
left: 'prev,next, month basicWeek today',
center: 'title',
right: ''
},
buttonText: {
today: 'Hoy',
month: 'Mes',
week: 'Semana'
},
editable: true,
weekends: true,
droppable: true, // this allows things to be dropped onto the calendar
dragRevertDuration: 0,
events: $scope.events,
drop: function(date, jsEvent, ui, resourceId) {
console.log("DROP!")
}
});
I would like in drop event, get data of this day.
I drag event and drop in day 1, that it has an event called "Carmen Donoso | BAJA", and when I drop it I would like to get this event.
Thanks

Change agenda hour from 6 am to 6 am tomorrow

I am trying to set FullCalendar so it shows hours from 6am to 6am the next day. I can set minTime=6, but what should I put as maxTime? Thanks!
This is the full code:
<script>
$(document).ready(function() {
$.ajax({
url: "/getfullcalendar",
cache: false
})
.done(function( retevents ) {
var retevents = retevents;
$('#fullcalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaDay,listWeek',
},
firstDay: 1,
defaultView: 'agendaDay',
navLinks: true,
minTime: "06:00:00",
// What to put here
// for the same time tomorrow (6am)?
maxTime: "24:00:00",
height: 'auto',
events: retevents,
});
});
});
</script>
maxTime: "30:00:00"
24 hours + 6 hours for the next day
It looks like you can use the
allDaySlot: true
option. https://fullcalendar.io/docs/agenda/allDaySlot/

Why FullCalendar doesn't display hours beside?

The calendar doesn't display hours beside .
i have uploaded a picture and put the code to understand the problem more
how can i correct it ?
Code javascript :
$(document).ready(function () {
var date = new Date();
// the code display the calendar
$('#calendar').fullCalendar({
// the header
header:{
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
lang: 'fr',
buttonIcons: false, // show the prev/next text
editable: true, // resize event
eventLimit: true, // allow "more" link when too many events
minTime: '06:00:00',
maxTime: '20:00:00',
eventRender: function (event, element) {
element.find('.fc-title').append(" || " + event.type);
},
dayClick: function (date, jsEvent, view, resourceObj) {
//getting the clicked date from calendar
},
eventClick: function (calEvent) {
// event clicked
},
// events redered in twig template
// I an working with symfony
events:{{ events|raw }}
})
});
thank you very much i'm using fc-time{ display: none;} it's working now

Categories