I am trying to implement full calendar js plugin but the events default to the first hour on the callendar that is from 12 a.m to 1 a.m .
Below is my code :
<script type="text/javascript">
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: {
url: '<?php echo base_url(); ?>appointments/get_appointmentss',
error: function () {
$('#script-warning').show();
}
},
// Convert the allDay from string to boolean
eventRender: function (event) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
loading: function (bool) {
$('#loading').toggle(bool);
}
});
});
</script>
The returned value in json encode is below :
[{"title":"Rabbi Less Brown Motivation","allDay":"false","start":"2015-06-17 14:00:00","end":"2015-06-17 15:00:00"},{"title":"Miss Mary Wochete Sinaida","allDay":"false","start":"2015-06-02 14:15:30","end":"2015-06-02 14:30:25"},{"title":"Lt Col Robirt Sharma Monk","allDay":"false","start":"2015-06-18 08:00:00","end":"2015-06-18 09:00:00"}]
The start and end day are saved on mysql data type datetime .
What am I not doing right for the information to display within the stipulated time ?
Related
Like everyone else I also have problem when displaying event in fullcalendar.
Below is my controller for JSON data:
function schedule($id) {
$data = $this->M_care->getSchedule($id);
echo json_encode($data);
exit;
}
This controller produce JSON data like that:
[{"id":"51","title":"test date","start":"2022-03-31T00:00:00-05:00","end":"2022-03-31T00:00:00-05:00"},{"id":"53","title":"test date","start":"2022-03-29T00:00:00-05:00","end":"2022-03-29T00:00:00-05:00"}]
and below is script for render calendar:
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'id';
var calendarEl = document.getElementById('calendar');
var url = '<?= base_url('service/Care/schedule/').$id; ?>';
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
validRange: function(nowDate) {
return {
start: nowDate
};
},
eventSources: [
{
url: url,
color: 'red',
textColor: 'black',
display: 'background'
}
]
});
calendar.render();
});
The $id in the url variable get from $id = $this->session->userdata('event');
Above code is not working for displaying events data. I have trying to solve this for several days, and search related question but none of them fix this issue.
Differs to the full calendar master database, I added a column called "link" in the event table of the database. My purpose is to allow users to go to different links when they click corresponding day.
I observe other posts/ documentation, still cannot figure out the solution.
Can someone help me?Below is the code of event.php and my js part in the index.html. I do not change any part of other files of the plugin
$json = array();
$request = "SELECT * FROM events ORDER BY id";
try {
$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
} catch (Exception $e) {
exit('Unable to connect to database.');
}
$result = $bdd->query($request) or die(print_r($bdd->errorInfo()));
echo json_encode($result->fetchAll(PDO::FETCH_ASSOC));
$(document).ready(function() {
function fmt(date) {
return date.format("YYYY-MM-DD HH:mm");
}
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next',
center: 'title',
right: '',
},
events: "events.php",
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
editable: true,
select: function(start, end, jsEvent, view) {
window.location = "I need different links fetched from db!!"
},
});
});
I'm trying to make a calendar with "FullCalendar" and codeigniter. I have read several questions on this page, but still do not understand because the calendar does not show me the events.
I have this routes:
$route['calendar'] = 'user/calendar/showCalendar';
$route['calendar/events'] = 'user/calendar/getEvents';
This is the controller:
public function showCalendar()
{
$this->template->add_css(base_url() . 'assets/plugins/fullcalendar/fullcalendar.min.css');
$this->template->add_js('https://code.jquery.com/ui/1.11.1/jquery-ui.min.js');
$this->template->add_js('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js');
$this->template->add_js(base_url() . 'assets/plugins/fullcalendar/fullcalendar.min.js');
$this->template->add_js(base_url() . 'assets/plugins/fullcalendar/config.js');
$data = array();
$this->template->write('title', 'Calendar', TRUE);
$this->template->write_view('header', 'user/template/header');
$this->template->write_view('sidebar', 'user/template/sidebar');
$this->template->write_view('content', 'user/calendar/calendar', $data, TRUE);
$this->template->render();
}
public function getEvents()
{
if($this->input->is_ajax_request())
{
$events = $this->calendar_mdl->getEvents();
echo json_encode($events);
}
}
My config.js:
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1070,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
}
ini_events($('#external-events div.external-event'));
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'hoy',
month: 'mes',
week: 'semana',
day: 'dia'
},
//Random default events
editable: true,
events: "http://project.dev/calendar/events"
});
});
And my model:
public function getEvents()
{
$this->db->select('*');
$this->db->order_by('id', 'DESC');
$query = $this->db_get(dbCalendar); // dbCalendar is a constant
if($query->num_rows() > 0)
{
return $query->result_array();
}
return FALSE;
}
It is the first time I try to use fullCalnedar, and I do not understand why it don't show me my events. I read the documentation, but don't it did not helped me to find out what the error may be.
I'm trying to make a website with php, mysql & fullcalendar jquery plugin where I want to show some datas of corresponding date from mysql table in the calendar but nothing is showing. Here is my js codes,
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicDay'
},
defaultDate: '2015-04-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
<?php while ($row=mysql_fetch_array($result)) { ?>
{
title: '<?php $row[1] ?>', //'This is today!',
start: '<?php $row[0] ?>' //'2015-04-12'
},
<?php } ?>
{
title: 'It was yesterday!',
start: '2015-04-11'
}
]
});
});
Is there something wrong in my code? How can I fetch data and pass it to jquery? Need this help badly! Tnx.
Add an "echo" before $row[x]. You need to do:
echo $row[1]; inside the php tags
I want to display contact info with the link to contact us page on mouse over hyperlink just like stackoverflow (mouse over user name) and gmail (click over user name). The below is what the latest updated code looks like.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />
<script>
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
console.log(posX,posY);
$('#dialog_content').dialog({
autoOpen: false,
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
<div id="dialog_content">bla bla bla</div>
<div id="open">CONTACT US</div>
The error that i get
Uncaught TypeError: Cannot read property 'left' of undefined
Check this option:
jsfiddle.net/3mxGM/4/
It creates a jQuery modal window with the info inside the div with id dialog_content. You might want dynamic content inside that div from your database or something. Anyway this should work for what you want.
html:
<div id="dialog_content">
Here you can write the info to show up in the modal window.<br /><br />
If you know what AJAX is, could be a good idea to use it to query your database and get the info from there.</div>
Open dialog
jQuery:
$(document).ready(function(){
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
$('#dialog_content').dialog({
autoOpen: false,
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
});
css:
.ui-dialog-titlebar {display:none;}
If you're looking for a much more code-simple popup tooltip, I am enjoying a customized version of this:
http://devseo.co.uk/examples/pure-css-tooltips/#
If this is too fancy for you it was just some css3 transitions on top of this more basic version, explained well here:
http://sixrevisions.com/css/css-only-tooltips/