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.
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 am trying to convert an old Fullcalendar based web app to V4. I can not get dayClick to fire.
I have this CodePen example: https://codepen.io/anon/pen/YMMEyN?&editable=true&editors=001
The example was initialized via a lik=nk from the FC web site. See below. It brings up a dayGridMonth view by default. It includes the interaction plugin but the dayClick method does not fire, no matter what day cell i click in.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
defaultDate: '2019-04-07',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
dayClick: function(info) {
alert("dayClick ");
},
events: [
{
title: 'All Day Event',
start: '2019-04-01'
},
{
title: 'Long Event',
start: '2019-04-07',
end: '2019-04-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2019-04-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2019-04-16T16:00:00'
},
{
title: 'Conference',
start: '2019-04-11',
end: '2019-04-13'
},
{
title: 'Meeting',
start: '2019-04-12T10:30:00',
end: '2019-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-04-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2019-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-04-28'
}
]
});
calendar.render();
});
I think you meant dateClick instead of dayClick:
dateClick: function(info) {
alert("dateClick");
},
for reference: dateClick() docs
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'
}
]
});
});
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.
DEMO
I am doing the fullcalendar and i was able to create it properly the demo above is exactly like what i have done so far. I wanted to add new function on the calendar on the demo if you add event and refresh the page the added event is gone. I wanted to save the event into the database so that if you refresh it it will still be there and also i can delete old events.
The default events are added like
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
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-02-01'
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-16T16:00:00'
},
{
title: 'Conference',
start: '2015-02-11',
end: '2015-02-13'
},
{
title: 'Meeting',
start: '2015-02-12T10:30:00',
end: '2015-02-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-02-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-02-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-02-28'
}
]
});
});
I want to be able to capture the data in the alert box when a date is clicked but i cant find where it is located.
I need to capture the text from that alert box so that i can store it in database after clicking ok.
Im still trying to read the documentation to find where i can get the text and store it in database
The Documentation is found here
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');
}
This is the part where the text is being get the variable title is the data from the alert which will be the title of the event.