I'm using fullcalender with jQuery and I'm wonder if its possible, if my array has 'bold' = true/false,
I could use jquery to attach a new class to it.
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: false,
allDay: false,
events: "json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days
' +
'(You cannot update these fields!)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
});
});
If I had a database value id 'bold' can I make jquery add a style the 'title'.
$result = $dbh->query($sql)->fetchAll(PDO::FETCH_ASSOC);
foreach ($result as $row){
$return[]=array('id'=>$row['id'],
'title'=>$row['title'],
'start'=>$row['start'].' '.$row['time'],
'end'=>$row['end'],
'url'=>$row['url'],
'backgroundColor'=>$row['backgroundColor'],
'textColor'=>$row['textColor'],
'borderColor'=>$row['borderColor'],
'description'=>$row['description'],
"allDay" => false);
}
$dbh = null;
header('Content-type: application/json');
echo json_encode($return);
I'd like to use jQuery or edit the phpscript possibly. But I do not want to edit fullcalender.js file.
EDIT
I've been looking more into this, and if events: "json-events.php" I could add a function that would add bold style to the css.
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: false,
allDay: false,
events: function() {...
maybe by adding variables of getElementById and if it is true, have it append a style to the css.
Not exactly sure if it's what you need but I used this code to add class to some of my elements in a jquery calendar when you mouse over a date. If the date you mouse over contains an element, a tool tip open with detail about that specific element.
/// <reference path="jquery-1.7.1-vsdoc.js" />
$(document).ready(function () {
$.getJSON("getProductJSON.json", null,
function (data) {
$('#calendar').fullCalendar({
editable: false,
theme: true,
header: {
left: 'prev,next today',
center: 'title'
},
events: data,
eventMouseover: function (calEvent, jsEvent) {
xOffset = 1;
yOffset = 8;
$("body").append(GetEventDetails(calEvent));
$("#tooltip")
.css("top", (jsEvent.clientY + yOffset) + "px")
.css("left", (jsEvent.clientX - xOffset) + "px")
.fadeIn("fast");
},
eventMouseout: function (calEvent, jsEvent) {
$("#tooltip").remove();
},
eventClick: function (calEvent, jsEvent) {
w = window.open('', 'More details Event: ', 'width=300,height=200')
w.document.write(GetEventDetails(calEvent));
w.focus();
return false;
}
});
}
);
});
function GetEventDetails(e) {
var output = "<p id='tooltip'>";
output += "<label class='tt'> Heure :</label>" + e.heure + "<br />";
output += "<label class='tt'> Durée :</label>" + e.duree + "<br />";
output += "<label class='tt'> Description :</label><br />" + e.desc + "</p>";
return output;
}
JSON data :
[
{ "title":"souper pizza", "desc":"5 a 7 pizza, initiation", "start":"2012/02/29","heure":"17:00:00","duree":"120",
"url": "#"
},
{ "title":"cours","desc":"cours6gei470","start":"2012/02/12","heure":"16:00:00","duree":"180",
"url": "#"},
{ "title":"Cool","desc":"Cool Yo","start":"2012/02/1","end":"2012/02/4","heure":"16:00:00","duree":"999",
"url": "#"}
]