I'm tryin' with FullCalendar. But when I add 'height' property into the initialize function, the dayClick function doesn't work, then I remove height, it works normally. Could you please explain to me why and how to set height for calendar.
Here is my code:
$(tag).fullCalendar({
defaultDate: date,
editable: true,
//height: 'auto',
header: {
left: 'today prev',
center: 'title',
right: 'next'
},
buttonText: {
today: 'Today'
},
dayClick: function(date, jsEvent, view) {
//code
},
});
Thank you very much!
That's invalid syntax, take out the comma after dayClick.
dayClick: function(date, jsEvent, view) {
//code
}
Related
I am getting a
Too much recursion
error when I click on any event or date. Here is some of my code
$('#kt_calendar').fullCalendar({
isRTL: false,
header: {
left: 'prev title next today',
center: '',
right: 'month,listMonth'
},
buttonText: {
month: 'Calendar View',
list: 'List View'
},
editable: false,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
events: events,
dayClick: function (date, jsEvent, view) {
load_day_events(date);
},
eventClick: function (info) {
if (info.id) {
load_event(info);
}
}
});
I am following a this codepen Here to implement popover in my fullcalendar. But the html does not render in popover.content. Instead it just displays it as string. Here is my implementation.
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: event_array,
eventRender: function (calEvent, $el) {
$el.popover({
title: calEvent.title,
content: "<div><b>Example popover</b> - content</div>",
start: calEvent.start,
end: calEvent.end,
trigger: "hover",
placement: "top",
container: "body"
});
}
})
Pretty sure this will have been asked before, but you can simply set the option
html: true
in your popover options to have your content rendered as HTML.
See the documentation for details.
I have used jquery fullcalender with basicWeek view but also i want to do event sorting for day also can you please help me to solve these issue.
i have used these code in my jquery
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek'
},
defaultView: 'basicWeek',
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
draggable: true,// this allows things to be draggable onto the calendar
editable: true,
//dragRevertDuration: 0,
drop: function() {
},
eventDragStop: function( event, jsEvent, ui, view ) {
}
});
But here i can not sorting the event please provide me the solution for sorting with default week view.
Using fullcalendar, I have events on each day. How do I go about hiding those events? I do apologize if this is an duplicate question. Example:
After entering the code that #CodeRomeos has given. Here is the result:
Another note: the style.css files have not been changed and I pulled them from,
https://github.com/angular-ui/ui-calendar
If I do the following to the code, ALL events are hidden. I only need events on the monthView to be hidden.
There was no solution posted nor I found an exact solution. A work around is the following:
$scope.uiConfig = {
calendar:{
height: 450,
editable: false,
selectable: true,
header:{
left: 'title',
center: '',
right: 'month today prev,next'
},
viewRender: function(view){
$('#myCalendar1').fullCalendar('removeEvents');
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
dayClick: $scope.alertOnDateClick,
timeClick: $scope.alertTest,
eventWipe: $scope.eventWipe
}
};
I am using fullCalendar in my website together with Bootstrap so that everytime I click on a day in month view, there is a popover to add event, just like that in Google Calendar. Here is my code
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
height: height,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function( date, allDay, jsEvent, view ){
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',html : true, container: 'body'
});
$(this).children().popover('show');
}
})
The code should be right before $(this).children().popover({ so that it closes all previously fired popover.
However, exactly, what code should I use to achieve this?
Thank you!
You can remove the popover or more specifically destroy the one created before by saving the reference (which would be a more specific and better approach).
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
$('.popover.in').remove(); //<--- Remove the popover
$(this).children().popover('show');
}
});
Fiddle Method1
or
var $calPopOver; //create a variable to save refe
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
if($calPopOver) //if there is something
$calPopOver.popover('destroy'); //then call popover destroy
$calPopOver = $(this).children().popover('show');
}
});
Fiddle Method2