When I execute the following code, the FullCallendar is not displayed correctly. The result I get is the following:
According to the FullCallendar demo it should look like this:
The debug console doesn't display any errors. What am I doing wrong?
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2016-12-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2016-12-01'
},
{
title: 'Long Event',
start: '2016-12-07',
end: '2016-12-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-12-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-12-16T16:00:00'
},
{
title: 'Conference',
start: '2016-12-11',
end: '2016-12-13'
},
{
title: 'Meeting',
start: '2016-12-12T10:30:00',
end: '2016-12-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-12-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-12-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-12-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-12-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-12-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-12-28'
}
]
});
});
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.css" rel="stylesheet" type="text/css" />
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
I just took a look at that stylesheet and noticed it has the word print in the URL. I then looked at the code and the comment says it's for a printer friendly version. Looking at your screenshot, I'd agree that's what it's doing.
I removed the .print from the URL and it looks like that one is the one you need.
http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css
Try removing the one for printers.
Related
I've looking to disable Drag n Drop of "All Day" events here in below Time grid.
I need to block Drag and Drop of All-Day Events into the Timegrid view below that section. So that All-Day Events should always be droppable in All-Day section and Time based events are draggable and droppable in Time base grid section.
Can this be done with FullCalendar JS?
sample code looks like this:
Codepen
HTML:
<div id='calendar'></div>
CSS:
#calendar {
max-width: 900px;
margin: 40px auto;
}
JS:
$(function() {
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
editable: true,
eventDurationEditable: false,
eventLimit: true,
nowIndicator: true,
now: '2019-06-09T09:25:00',
events: [
{
title: 'All Day Event',
start: '2019-06-01',
},
{
title: 'Long Event',
start: '2019-06-07',
end: '2019-06-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-06-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-06-16T16:00:00'
},
{
title: 'Conference',
start: '2019-06-11',
end: '2019-06-13'
},
{
title: 'Meeting',
start: '2019-06-12T10:30:00',
end: '2019-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-06-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2019-06-12T17:30:00'
},
{
title: 'Dinner',
start: '2019-06-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2019-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-06-28'
}
]
});
});
i have role.
when user click block box. box will be selection 2 box after box clicked (like drag selected by mouse).
if 2 box have one or more union some event. selected to fail. (make sure 2 box is available box) but i stuck how to do it.
i want to build registration building for event. and this is interface to get time to registration.
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
selectable: true,
eventLimit: true, // allow "more" link when too many events
allDaySlot: false,
editable: false,
selectAllow: function(selectInfo) {
var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
console.log(selectInfo.end);
return duration.asHours() <= 1;
},
selectMinDistance: 0,
header: {
left: 'prev',
center: 'title',
right: 'next'
},
eventMouseover: function(event, jsEvent, view) {},
validRange: function(nowDate) {
nowDate = nowDate.clone().add(-1, 'day');
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
businessHours: [{
dow: [1], // Monday - Friday
start: '08:00',
end: '12:00',
}, {
dow: [4, 5], // Monday - Friday (if adding lunch hours)
start: '13:00',
end: '17:00',
}],
selectConstraint: "businessHours",
resources: [{
id: 'b',
title: '',
eventColor: 'green'
}, ],
events: [{
id: '2',
resourceId: 'b',
start: '2018-10-27T09:00:00',
end: '2018-10-27T10:00:00'
},
{
id: '3',
resourceId: 'b',
start: '2018-11-28T12:00:00',
end: '2018-11-28T06:00:00'
},
{
id: '4',
resourceId: 'b',
start: '2018-10-29T07:30:00',
end: '2018-10-29T09:30:00'
},
{
id: '5',
resourceId: 'b',
start: '2018-10-29T10:00:00',
end: '2018-10-29T15:00:00'
}
],
select: function(start, end, jsEvent, view, resource) {
console.log(
'select ted',
start.format(),
end.format(),
resource ? resource.id : '(no resource)'
);
},
});
});
i have snippet
$(function() { // document ready
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
selectable: true,
eventLimit: true, // allow "more" link when too many events
allDaySlot: false,
editable: false,
selectAllow: function(selectInfo) {
var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
console.log(selectInfo.end);
return duration.asHours() <= 1;
},
selectMinDistance: 0,
header: {
left: 'prev',
center: 'title',
right: 'next'
},
eventMouseover: function(event, jsEvent, view) {},
validRange: function(nowDate) {
nowDate = nowDate.clone().add(-1, 'day');
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
businessHours: [{
dow: [1], // Monday - Friday
start: '08:00',
end: '12:00',
}, {
dow: [4, 5], // Monday - Friday (if adding lunch hours)
start: '13:00',
end: '17:00',
}],
selectConstraint: "businessHours",
resources: [{
id: 'b',
title: '',
eventColor: 'green'
}, ],
events: [{
id: '2',
resourceId: 'b',
start: '2018-10-27T09:00:00',
end: '2018-10-27T10:00:00'
},
{
id: '3',
resourceId: 'b',
start: '2018-11-28T12:00:00',
end: '2018-11-28T06:00:00'
},
{
id: '4',
resourceId: 'b',
start: '2018-10-29T07:30:00',
end: '2018-10-29T09:30:00'
},
{
id: '5',
resourceId: 'b',
start: '2018-10-29T10:00:00',
end: '2018-10-29T15:00:00'
}
],
select: function(start, end, jsEvent, view, resource) {
console.log(
'select ted',
start.format(),
end.format(),
resource ? resource.id : '(no resource)'
);
},
});
});
.fc-time-grid .fc-event,
.fc-time-grid .fc-bgevent {
width: calc(100% + 4px);
margin-left: -2px;
border-radius: 0px;
}
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
I need to highlight a specific day from the fullcalendar using JavaScript/jQuery. The date should be given by user input. I have provided my code below:
<style type="text/css">
.cellBg {
background: #000;
color: #fff;
}
</style>
$(document).ready(function() {
var today=new Date().toISOString().substring(0, 10);
var highligtDate="2017-12-05";
console.log('today',today);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay,today,listMonth'
},
dayRender:function(date,cell){
date = new Date();
date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
$('.fc-day[data-date="'+ date +'"]').addClass('cellBg');
},
///////// edit
dayClick: function (date, jsEvent, view) {
//alert('day click');
},
eventClick:
function (event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
///////////
defaultDate: today,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-05-01'
},
{
title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00'
},
{
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13'
},
{
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-05-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-05-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-05-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-05-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-05-13T07:00:00'
},
{
title: 'Click for Google',
//url: 'http://google.com/',
start: '2017-05-28'
}
]
});
});
Here I have one date var highligtDate="2017-12-05" and I need to highlight this day cell from the calendar.
Compare the date with highligtDate and assign 'cellBg' class to it.There you do not have a condition to assign this class to particular date.
$(document).ready(function() {
var today=new Date().toISOString().substring(0, 10);
var highligtDate="2017-12-05";
console.log('today',today);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay,today,listMonth'
},
dayRender:function(date,cell){
//date = new Date();
//date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
//Compare the date with highligtDate and assign 'cellBg' class to it.
if(date.format('YYYY-MM-DD') == highligtDate)
{
$('.fc-day[data-date="'+ highligtDate +'"]').addClass('cellBg');
}
},
///////// edit
dayClick: function (date, jsEvent, view) {
//alert('day click');
},
eventClick:
function (event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
///////////
defaultDate: today,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-05-01'
},
{
title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00'
},
{
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13'
},
{
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-05-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-05-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-05-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-05-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-05-13T07:00:00'
},
{
title: 'Click for Google',
//url: 'http://google.com/',
start: '2017-05-28'
}
]
});
});
Hi i am trying to use the fullcalendar plugin to create a calendar.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event title');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-12-01'
},
{
title: 'Long Event',
start: '2015-12-07',
end: '2015-12-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-16T16:00:00'
},
{
title: 'Conference',
start: '2015-12-11',
end: '2015-12-13'
},
{
title: 'Meeting',
start: '2015-12-12T10:30:00',
end: '2015-12-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-12-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-12-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-12-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-12-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-12-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-12-28'
}
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</div>
</body>
</html>
Here are the codes. However i want to do it in a way that when a person click on any of the date, it will redirect them to another html page. i went to research online and found out that it got something to link to dayclick or eventclick function. However i dont really know how to apply into it to suit my needs. hope anyone could help me. Help would be appreciated alot. Thanks in advance. :)
You can just use the url property in the event data as follows:
events: [
{
title: 'All Day Event',
start: '2015-12-01',
url: 'http://google.com'
}
If you look at the docs here: http://fullcalendar.io/docs/event_data/Event_Object/ you can see all the different properties you can use.
use:
select:function()
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, jsEvent, view){
//wrtie your redirection code here
var root_url="http://localhost/";
window.location = root_url+"test1.html"
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-12-01'
},
{
title: 'Long Event',
start: '2015-12-07',
end: '2015-12-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-12-16T16:00:00'
},
{
title: 'Conference',
start: '2015-12-11',
end: '2015-12-13'
},
{
title: 'Meeting',
start: '2015-12-12T10:30:00',
end: '2015-12-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-12-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-12-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-12-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-12-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-12-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-12-28'
}
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
This is how to make the link open in new tab:
events: [
{
title: 'All Day Event',
start: '2015-12-01',
link_to_url: 'http://example.com' //if you use "url:", it will redirect you in the same tab with no Back functionality
}
]
and in the initialization use
eventRender: function (info) {
if (info.event.extendedProps.link_to_url != null && info.event.extendedProps.link_to_url != "") {
$(info.el).attr("href", info.event.extendedProps.link_to_url);
$(info.el).attr("target", "_blank");
}
}
A note: when I tried the answers mentioned by #Harry and #Ravi, I lost the possibility to get back by browser Back button (Firefox).
In version 4.0 onward, you can do like that.
From the backend, you can provide any link, custom html, or whatever you want, then in the render function you repopulate like below:
eventRender: function (info) {
var customTitleForMonth = info.event.title;
$(info.el).find('.fc-title').html(customTitleForMonth);/*For Month,Day and Week Views*/
var customTitleForList = info.event.title.replace("target=", "style='color:black;text-decoration:underline;' target=");
$(info.el).find('.fc-list-item-title').html(customTitleForList);/*For List view*/
$(info.el).find('.fc-content').css('min-height', '70px');
},
where info.event.title is the title which contains the custom html.
I am able to add button on each cell with this:
var add_button = '<input type="button" value="+" />';
$(".fc-day-number").prepend(add_button);
but I want this to happen after clicking on this link:
<a id="test" style="background-color:#3a87ad; border-radius: 5px; padding:10px 30px; font-weight:600; letter-spacing: 0.8px; color: #fff; font-size:1.1em; text-shadow:none;">1:00 AM - 2:00 AM</a> <em class="glyphicon glyphicon-remove" style="position: relative; top: -20px;"><span class="sr-only sr-only-focusable">Remove</span></em></a>
I have tried this, but it's not working:
$('#test').bind('click', function( event ){
alert('Hi there!');
$('$calendar').fullcalendar({
var add_button = '<input type="button" value="+" />';
$(".fc-day-number").prepend(add_button);
});
});
I got it myself,
added onClick event in link
<li><a onClick="setTimeSlot('1:00 AM - 2:00 AM')" style="background-color:#3a87ad; border-radius: 5px; padding:10px 30px; font-weight:600; letter-spacing: 0.8px; color: #fff; font-size:1.1em; text-shadow:none;">1:00 AM - 2:00 AM</a> <em class="glyphicon glyphicon-remove" style="position: relative; top: -20px;"><span class="sr-only sr-only-focusable">Remove</span></em></a></li>
Created javascript function:
<script type="text/javascript">
var timeSlot; //Created global variable to add timeslot
function setTimeSlot(time) {
alert("Time slot is in function :" + time);
timeSlot = time;
}
</script>
Now added this code in fullcalendar.
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2015-01-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-01-01'
},
{
title: 'Long Event',
start: '2015-01-07',
end: '2015-01-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-01-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-01-16T16:00:00'
},
{
title: 'Conference',
start: '2015-01-11',
end: '2015-01-13'
},
{
title: 'Meeting',
start: '2015-01-12T10:30:00',
end: '2015-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-01-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-01-12T17:30:00'
},
{
title: 'UI Development Meeting',
start: '2015-01-21',
end: '2015-01-21'
},
{
title: 'Two Day Event',
start: '2015-01-29',
end: '2015-01-31'
}
],
dayClick: function(date) {
addEvent(date);
},
});
function addEvent(date) {
var newEvent = {
title: timeSlot,
start: date.format()
};
}
$('#calendar').fullCalendar('renderEvent',newEvent,true);
}
});