I have a database, where there dates who are in format like 21-01-2023 but fullcalendar read dates like 2023-01-20.
I would like to read dates events like 21-01-2023 14:55.
I set lang to fr but just change the language not the the format date.
Any advice or tips would be appreciate.
Thanks.
there is example code of what i want to (see the third events example please)
the sample code :
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
</head>
<body>
<h2>Translate FullCalendar v2</h2>
<center>
<div id="calendar"></div>
</center>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang-all.js"></script>
<script>
$(document).ready(function(){
$('#calendar').fullCalendar({
lang: 'fr',
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Long Event',
start: '2023-01-07',
end: '2023-01-10'
},
{
title: 'Long Event in my format date i want',
start: '20-01-2023',
end: '21-01-2023'
},
]
});
});
</script>
</body>
</html>
You can do it using moment to parse your dates as follows :
moment("20-01-2023", "DD-MM-YYYY")
$(document).ready(function(){
$('#calendar').fullCalendar({
lang: 'fr',
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Long Event',
start: '2023-01-07',
end: '2023-01-10'
},
{
title: 'Long Event 2',
start: moment("20-01-2023", "DD-MM-YYYY"),
end: moment('21-01-2023',"DD-MM-YYYY")
},
]
});
});
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
</head>
<body>
<h2>Translate FullCalendar v2</h2>
<center>
<div id="calendar"></div>
</center>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang-all.js"></script>
</body>
</html>
Related
Facing a problem today, that jqxGrid shows : No data to display.
Downloaded and unpacked today v7.1.0.
Testing with browser Mozilla
Here is JSON, which generated by API:
{"data":[{"id":46,"dateChanged":"2019-03-02 06:30:42","isHidden":0,"isBusiness":0,"name1":"System","name2":"Administrator","sex":0,"dateOfBirth":"1970-01-01"},{"id":47,"dateChanged":"2019-03-02 06:49:25","isHidden":0,"isBusiness":0,"name1":"System 1","name2":"Administrator 1","sex":1,"dateOfBirth":"1980-01-01"}]}
Here is code, exactly as shown in demo in order to populate grid:
<script type="text/javascript" src="/AA/assets/jqx/jquery.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxcore.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxdata.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxbuttons.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxscrollbar.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxmenu.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxgrid.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxlistbox.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxgrid.pager.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxgrid.columnsresize.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var customerSource =
{
datatype: 'json',
datafields: [
{name: 'id'},
{name: 'name1'},
{name: 'name2'}
],
id: 'id',
url: '/api/customer/get/list',
root: 'data'
};
var customerAdapter = new $.jqx.dataAdapter(customerSource,
{
formatData: function (data) {
return {};
}
}
);
customerAdapter.dataBind();
$("#jqxgrid").jqxGrid(
{
source: customerAdapter,
columnsresize: true,
autoheight: true,
autowidth: true,
columns: [
{text: 'id', datafield: 'id', width: 180},
{text: 'First Name', datafield: 'name1', width: 180},
{text: 'Last Name', datafield: 'name2', width: 180}
]
});
});
</script>
</head>
<body>
<div id="jqxgrid"></div>
</body>
Am I doing something wrong or shall i use another library?
Thank You,
Roman.
In the end, problem was in PHP generating JSON. I didn't noticed earlier but it adds to URI some parameters that was not processed correctly. Fixed by changing the PHP generating JSON script!
I need to be able to let users move some events around on my fullcalendar. And I want to go to server and fetch counterparties' busy times and display them as background events on the calendar when the dragging is going on. However, when I call .fullcalendar('renderEvents', [...]) while the dragging is happening, the dragging mechanism within fullcalendar breaks and stops.
Is there a way to either add events without breaking dragging or some other way highlight busy times that have to be retrieved with ajax call?
The example is here: https://jsbin.com/qikiganelu/1/edit?js,output. Try dragging 'Meeting with Bob'.
$(function() { // document ready
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
defaultView: 'agenda',
duration: {days: 2},
allDaySlot: false,
defaultDate: '2017-04-27',
minTime: '9:00',
maxTime: '17:00',
events: [
{
title: 'Keynote',
start: '2017-04-27T09:00',
end: '2017-04-27T11:00',
editable: false,
color: "gray",
},
{
title: 'Meeting with Bob',
start: '2017-04-27T12:30',
end: '2017-04-27T13:00',
editable: true,
},
],
eventDragStart: function(event, jsEvent, ui, view){
// fetch Bob's busy times and add them as background events
var busyTimes = [
{
start: '2017-04-27T14:00',
end: '2017-04-27T16:00',
rendering: 'background',
},
{
start: '2017-04-28T9:00',
end: '2017-04-28T12:00',
rendering: 'background',
}
];
$('#calendar').fullCalendar('renderEvents', busyTimes);
},
});
});
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.css' rel='stylesheet' />
<link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.js'></script>
<!-- the code from the JavaScript tab will go here -->
<!-- the code from the CSS tab will go here -->
</head>
<body>
<div id='calendar'></div>
</body>
</html>
As a workaround, try preloading all the background events, but hiding them via CSS until the drag operation happens. For instance:
// hide all background events by default
.fc-bgevent {
display: none;
}
// redisplay once "show-background-events" class toggled on
.fc-bgevent.show-background-events {
display: block;
}
Show / hide the background events by toggling the .show-background-events class like so:
eventDragStart: function(event, jsEvent, ui, view){
$(".fc-bgevent").addClass("show-background-events");
},
eventDragStop: function(event, jsEvent, ui, view){
$(".fc-bgevent").removeClass("show-background-events");
}
Example at: https://jsbin.com/vuvacisibu/1/edit?css,js,output
My bad, I now see the problem. And your mistake is the place you put your $('#calendar').fullCalendar('renderEvents', busyTimes); and also the way you write the array, I also changed the ISO8601 time string a bit to be sure.
You can remove the seconds from the time string and write 2017-04-27T12:35Z instead of 2017-04-27T12:35:02Z for example
<script>
$(function() { // document ready
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
defaultView: 'agenda',
duration: {days: 2},
allDaySlot: false,
defaultDate: '2017-04-27',
minTime: '9:00',
maxTime: '17:00',
events: [
{
title: 'Keynote',
start: '2017-04-27T09:00',
end: '2017-04-27T10:00',
editable: false,
color: "gray",
},
{
title: 'Meeting with Bob',
start: '2017-04-27T10:35:02Z',
end: '2017-04-27T11:35:02Z',
editable: true,
},
],
eventDragStart: function(event, jsEvent, ui, view){
}
});
//this is the new place for the fetching and calling renderEvents
// fetch Bob's busy times and add them as background
var busyTimes = [
{title: 'Event One', start: '2017-04-27T12:35:02Z', end: '2017-04-27T13:35:02Z'},
{title: 'Event Two', start: '2017-04-27T14:35:02Z', end: '2017-04-27T15:35:02Z'}
];
$('#calendar').fullCalendar('renderEvents', busyTimes);
});
</script>
Default weekview is like this one, no time of the day on left side:
http://fullcalendar.io/views/basicWeek/
but I'd like to make the view this way, with time of the day on left side:
http://fullcalendar.io/js/fullcalendar-2.3.1/demos/agenda-views.html
click 'week' on upper button panel to see it.
How do I configure it to make it looks like this way?
Thanks!
You want to use the defaultView property. This sets, as specified in the docs, the initial view when the calendar loads. The specific view you want is agendaWeek (list of available views).
So when you initialize your calendar, you'll put defaultView: 'agendaWeek'.
Example:
$('#fullCal').fullCalendar({
events: [{
title: 'Random Event 1',
start: moment().add(-4, 'h'),
end: moment().add(-2, 'h'),
allDay: false
}, {
title: 'Random Event 2',
start: moment().add(1, 'h'),
end: moment().add(2, 'h'),
allDay: false
}, {
title: 'Random Event 3',
start: moment().add(6, 'h'),
end: moment().add(8, 'h'),
allDay: false
}],
header: {
left: '',
center: 'prev title next today',
right: ''
},
timezone: 'local',
defaultView: 'agendaWeek' /* this is the line you need */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<div id="fullCal"></div>
I have 4 events on one day.
When I set eventLimit to 3 it displays '+2 more' as expected.
But when you click on '+2 more' it only displays the 2 events that are already visible when it should display all events for that day.
When I set eventLimit to 4 all 4 events display fine.
How can I get all 4 events to display when you click '+2 more'????
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.css' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.js'></script>
</head>
<body>
<div id="calendar">
</div>
<script>
$('#calendar').fullCalendar(
{editable: false,
firstday: 1,
eventLimit: 3,
eventTextColor: 'white',
events:[
{
title: 'Multi day event 1',
start: '2014-11-09',
end: '2014-11-16'
},
{
title: '1 Day event 1',
start: '2014-11-12',
end: '2014-11-12'
},
{
title: '1 Day Event 2',
start: '2014-11-12',
end: '2014-11-12'
},
{
title: '2 Day event',
start: '2014-11-12',
end: '2014-11-14'
}
]}
);
</script>
</body>
</html>
You have an issue with your events array, specifically with those that don't appear on the popover (1 Day event 1 and 1 Day Event 2).
By the description you have, I'm assuming these will be all day events. If this is the case, you should define the events in the following manner (remove the end option and add allDay: true):
{
title: '1 Day event 1',
allDay: true,
start: '2014-11-12'
},
{
title: '1 Day Event 2',
allDay: true,
start: '2014-11-12'
},
If the events aren't supposed to be all day, then you must define the time part, as such:
{
title: '1 Day event 1',
start: '2014-11-12T12:00:00',
end: '2014-11-12T16:00:00'
},
{
title: '1 Day Event 2',
start: '2014-11-12T18:00:00',
end: '2014-11-12T20:00:00'
},
Check this jsfiddle, where I've changed those events with the options I'm presenting here.
In this google calendar, when you click on a date which has an event, it will popup the event details.
http://examples.tripod.com/calendar.html
This is what I need (though its size is much larger than I need), but after searching on google, I realize there is a big limitation with google calendar. There is no easy way to customize its style using css because embedded google calendar is provided inside an iframe. There are solutions such as RESTYLEgc , but I don't really want to go for it.
Now I am looking for an open-source javascript calendar that supports built-in event detail popup. It can be an extremely simple one, as long as it allows year/month navigation and it can highlight the date that has an event on it, and of course the built-in event pop up feature.
It will be great if it's built on jQuery since I already have the jQuery library included on the website.
I have only very few important events to set on the calendar, I expect I will be using codes like these:
var event1Html='<div class="event-details">Some event details here</div>';
calendar.setEvent('2012-1-25',event1Html);
var event2Html='<div class="event-details">Some other event details here</div>';
calendar.setEvent('2012-1-31',event2Html);
Is there such a javascript calendar that you know of?
I would look in to the fullcalendar script. From the looks of it, it can bring in google calendars, but also has an eventClick event that you can bind to and use (possibly) jQuery-UI to show a dialog of further information.
For a demo, do the following:
Visit that fullcalendar site and download the latest version (looks to be 1.5.2)
Extract the fullcalendar-1.5.2\fullcalendar-1.5.2\fullcalendar folder to your desktop.
Create a "calendardemo.html" file on your desktop and paste the following in to it:
<html>
<head>
<title>Calendar Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>
<style type="text/css">
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 640px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="calendar"></div>
<div class="ui-helper-hidden" id="calendar-details" title="Event Details">
<p>Event details</p>
</div>
<script type="text/javascript">
$(function(){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var $dialog = $('#calendar-details').dialog({
autoOpen: false,
model: true,
height: 300,
width: 350
});
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
],
eventClick: function(event,jsEvent,view){
console.log(event);
$dialog.dialog({title:event.title});
$('p',$dialog).empty().append(
$('<p />').text(event.allDay ? 'All day event' : 'Scheduled: ' + event.start + '-' + event.end)
);
$dialog.dialog('open');
}
});
});
</script>
</body>
</html>
Now click on an event. Unpolished, yes, but shows a pretty simple way of achieving what you're going for.