I have a problem with full calendar, it's not showing the description i dont know why.. my code is:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'hoy',
month: 'mes',
week: 'semana',
day: 'día'
},
//Random default events
events: function(start, end, timezone, callback) {
$.ajax({
url: "<?php echo base_url(); ?>calendar/retrieve",
type: 'POST',
dataType: 'html',
data: {
start: start.format(),
end: end.format()
},
success: function(doc)
{
var events = [];
var eventRender = [];
if(!doc.result)
{
$.each($.parseJSON(doc), function() {
events.push({
title: this.description,
start: this.start_date,
end: this.end_date,
backgroundColor: "#0073b7",
description: 'second description',
borderColor: "#0073b7"
});
});
}
callback(events);
}
});
},
I'm getting the information from a database and then I show it in the calendar... I put description: 'some description...', but when I see the calendar it is not displaying that, why? or if you know another way to put a description, a tooltip maybe i dunno... I have seen examples but without a loop and i need how to put with a loop..
I am using the fullcalendar version 3.4.0
Thanks!
You can try to change $.each loop like this:
$.each(JSON.stringify(doc), function (i, d) {
events.push({
title: doc[i].description,
start: doc[i].start_date,
end: doc[i].end_date,
backgroundColor: "#0073b7",
description: 'second description',
borderColor: "#0073b7"
});
});
Related
i have the following data
then i want to display in full calendar
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek'
},
events: function(start, end, timezone, callback) {
$.ajax({
url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
type: 'GET',
dataType: 'JSON',
success: function(data) {
var events = [];
if (data != null) {
$.each(data, function(i, item) {
events.push({
start: item.date,
title: 'Present',
display: 'background'
})
})
}
console.log('events', events);
}
})
}
});
calendar.render();
});
the data doesn't appear in the calendar, but it does appear in console.log
There are two issues here:
events: function(start, end, timezone, callback) { is wrong for fullCalendar 5. That looks like the syntax from an earlier version. https://fullcalendar.io/docs/v5/events-function shows the function's signature in v5, which is
function( fetchInfo, successCallback, failureCallback ) {
You forgot to use the provided callback to return the events to fullCalendar. So your function is downloading the events and logging them, but they never make it to the calendar.
Therefore this:
events: function( fetchInfo, successCallback, failureCallback ) {
$.ajax({
url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
type: 'GET',
dataType: 'JSON',
success: function(data) {
var events = [];
if (data != null) {
$.each(data, function(i, item) {
events.push({
start: item.date,
title: 'Present',
display: 'background'
})
})
}
console.log('events', events);
successCallback(events);
}
})
}
should fix it.
P.S. Really you should also be using the start and end dates provided inside the fetchInfo object to send to your server, and the server should be using them to restrict the events it returns to only those which occur (or overlap) within those dates. That way you don't return a large number of events which mostly never get viewed, instead you only return what's relevant to the date range bein displayed.
I want to implement a calendar option that can be able to show the list of events in a specific day. I query my results from the Database and it comes as a JSON format below :
[
{
title: "No of Appointments : 48",
START: "1970-01-01"
},
{
title: "No of Appointments : 2",
START: "2017-06-14"
},
{
title: "No of Appointments : 2",
START: "2017-06-15"
},
{
title: "No of Appointments : 1",
START: "2017-06-20"
},
{
title: "No of Appointments : 1",
START: "2017-06-21"
}
]
And my jquery file is as below :
var cal = jQuery.noConflict();
cal(document).ready(function () {
function get_data() {
cal.ajax({
url: "<?php echo base_url(); ?>Reports/get_count_apointments/",
type: 'GET',
dataType: 'JSON',
success: function (data) {
var appointment_info = data;
draw_calendar(appointment_info);
}, error: function (jqXHR) {
console.log(jqXHR);
}
});
}
get_data();
function draw_calendar(appointment_info) {
cal('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: appointment_info
});
}
});
However the following opens the calendar with no marked event date.
Hence a blank page with no event on a specific date.
How can I solve this issue?
I have a calendar script that is displaying the information in the script under "events" I would simple like to let the script get the data from MySql but I tried in Dreamweaver and failed below is the script you will see there are only 4 fields ID; title; start and end. So I have a database called calendar but i am struggling to get it to work.
This site is made in Dreamweaver and is linked to a MySql server on Xampp on localhost. I simply need to pull the data from the database in order to replace the text under events.
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaDay'
},
defaultDate: '2017-05-12',
navLinks: true, // can click day/week names to navigate views
editable: false,
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'
}
]
});
});
</script>
I successfully store and retrive event from database using ajax now how to show this into events in fullcalnder??
Saving event in Database: Using Ajax.
$('#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
};
$.ajax ({
url: "http://localhost/phplec/sms/calendar/test",
type: 'POST',
data: {'title': title, 'start' : start.format(), 'end': end.format()},
success: function(msg) {
alert(msg);
}
});
Controller: Here i Accept Ajax request and connect to DB
function test() {
$this->load->model('calendar_model');
$data = array(
'title' => $_POST['title'],
'start' => $_POST['start'],
'end' => $_POST['end']
);
$this->calendar_model->add_record($data);
echo "working";
}
Now I want To show my database in fullCalander on page laod.
I successfully get event from database and convet it into json now how to show it on view.
function get_records()
{
$data = $this->db->get("calendar_test");
$json_data = json_encode($data->result_array());
var_dump($json_data);
}
How i Show this event Dynamically
$.ajax ({
url: "http://localhost/phplec/sms/calendar/get_records",
type: 'GET',
dataType: "html", //expect html to be returned
success: function(response){
alert(response)
}
I successfully get event json in fullcalander.js now how to pass this to events.
OK from what I understand you want to click on a calendar day, it prompts you for a title, then you submit the data to the DB and then you want to see it again. These are the steps you need to take:
you need to use the events method so that fullcalendar knows how to fetch events when its loaded, like this:
$('#calendar').fullCalendar({
// ....your other methods...
events: 'http://localhost/phplec/sms/calendar/get_records' //this should echo out JSON
});
after your ajax succesfully saves the events in the database, then call the refetchEvents method like this:
$('#calendar').fullCalendar('refetchEvents');
In the end, this is how I would do it:
var myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'http://localhost/phplec/sms/calendar/get_records',
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
var eventData = {
title: title,
start: start.format(),
end: end.format()
};
$.ajax({
url: "http://localhost/phplec/sms/calendar/test",
type: 'POST',
data: eventData,
success: function(result) {
if(result === "working"){
myCalendar.fullCalendar('refetchEvents');
}else{
alert("Error Message");
}
},
error: function(xhr, status, msg) {
alert(msg);
}
});
}
}
});
I'm a beginner with php and fullcalendar.I need to update the calendar with the user input value ($('#name')). But it doesn´t work.
I have this code.
$(document).ready(function() {
var UsrAux;
$('#name').blur(function(){
UsrAux = $('#name').val() // <-- This is the input
});
$('#calendar').fullCalendar({
draggable: true,
height: 400,
cache: true,
eventSources: [
// your event source
{
url: 'CalendarServer.php',
type: 'POST',
data: {
uno: 'Something',
UsrCdg: UsrAux
},
error: function() {
alert('error!');
},
color: '#e2ebef', // a non-ajax option
textColor: 'black' // a non-ajax option
}
]
});
});
Any help would be greatly appreciated!
The blur event function should be defined before the fullCalendar as it gets the data (the user input) you need.
Hi this is the solution.
$(document).ready(function(){
var UsrAux;
UsrAux=$('#name').val();
$('#name').blur(function(){
UsrAux=$('#name').val();
var source = {
url: 'CalendarServer.php',
type: 'POST',
data: { // Parms
uno: 'Somenthing',
UsrCdg: UsrAux
},
error: function() {
alert('error!');
},
color: '#e2ebef', // a non-ajax option
textColor: 'black' // a non-ajax option
};
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', source);
});
$('#calendar').fullCalendar({
draggable: true,
height: 400,
cache: true,
eventSources: [
// your event source
{
url: 'CalendarServer.php',
type: 'POST',
data: { // Parms
uno: 'something',
UsrCdg: $('#name').val()
},
error: function() {
alert('error!');
},
color: '#e2ebef', // a non-ajax option
textColor: 'black' // a non-ajax option
}
]
});
});