jquery fullcalendar Draw a line on current time
fullcalendar, jquery
Solution
Probably there is already an answer on SO (but I can't find it...) because I have this code snippet and demo in my jsfiddle area.
You can use a custom function to fire in `viewRender` event; a dashed CSS to style the added line.
Triggered when a new date-range is rendered, or when the view type switches.
Code:
function setTimeline(view) {
var parentDiv = jQuery(".fc-agenda-slots:visible").parent();
var timeline = parentDiv.children(".timeline");
if (timeline.length == 0) { //if timeline isn't there, add it
timeline = jQuery("<hr>").addClass("timeline");
parentDiv.prepend(timeline);
}
var curTime = new Date();
var curCalView = jQuery("#mycalendar").fullCalendar('getView');
if (curCalView.visStart < curTime && curCalView.visEnd > curTime) {
timeline.show();
} else {
timeline.hide();
return;
}
var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds();
var percentOfDay = curSeconds / 86400; //24 * 60 * 60 = 86400, # of seconds in a day
var topLoc = Math.floor(parentDiv.height() * percentOfDay);
timeline.css("top", topLoc + "px");
if (curCalView.name == "agendaWeek") { //week view, don't want the timeline to go the whole way across
var dayCol = jQuery(".fc-today:visible");
var left = dayCol.position().left + 1;
var width = dayCol.width() - 2;
timeline.css({
left: left + "px",
width: width + "px"
});
}
}
$('#mycalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title'
},
defaultView: 'agendaDay',
editable: true,
events: [{
title: 'event1',
start: '2014-01-07'
}, {
title: 'event2',
start: '2014-01-10',
end: '2013-05-15'
}, {
title: 'event3',
start: '2014-01-13 12:30:00',
allDay: false // will make the time show
}],
viewRender: function (view) {
try {
setTimeline();
} catch (err) {}
},
});
CSS:
.timeline {
position: absolute;
border-top: 2px dashed red;
width: 100%;
margin: 0;
padding: 0;
z-index: 999;
}
Demo: http://jsfiddle.net/IrvinDominin/M67kv/
Problem
I want to display current time in jquery full calendar while slotMinutes is 15 Below is my code for review ``` $.createFullCalendarWithCurrentTime = function (selectCallback, eventsCallback, mouseOverCallback, options, eventRenderCallback, curTime) { var mintime = 7; var maxtime = 22; var slotsTable = undefined; var calendar = undefined; calendar = $('#calendar').fullCalendar({ unselectAuto: false, header: { left: 'prev', center: 'title', right: 'next' }, titleFormat: { week: "MMMM dd, yyyy{ - MMMM dd, yyyy}" }, // Sep 7 - 13 2009 , defaultView: "agendaWeek", columnFormat: { week: 'dddd' }, eventBackgroundColor: options && options["eventBackgroundColor"] ? options["eventBackgroundColor"] : "#FFEB00", eventBorderColor: "#FFEB00", eventTextColor: options && options["eventTextColor"] ? options["eventTextColor"] : "#333333", axisFormat: 'h(:mm) tt', aspectRatio: 0.1, buttonText: { prev: '', next: '' }, selectable: (selectCallback != null && $.isFunction(selectCallback) ? true : false), selectHelper: true, editable: false, allDaySlot: false, slotMinutes: 15, minTime: 7, maxTime: 22, firstDay: 1, eventMouseover: mouseOverCallback, viewDisplay: function () { // Create slots table only if not created if (!slotsTable) { // Set time for (var i = 0; i < maxtime - mintime; i++) { $(".fc-slot" + (i * 2 + (i * 2 + 2)) + ".fc-minor>th").html(((mintime + i) < 12 ? (mintime + i) : ((mintime + i) == 12) ? 12 : (mintime + i) % 12) + ":30 " + (mintime + i < 12 ? "am" : "pm")); $(".fc-slot" + (i * 2 + (i * 2 + 2)) + ".fc-minor>th").addClass("innerHours"); } // Set styles slotsTable = $(".fc-agenda-slots").clone(); slotsTable.addClass("cloned"); slotsTable .css("position", "absolute") .css("top", "-12px") .css("z-index", "-100"); $(".fc-agenda-slots th").css("visibility", "hidden"); slotsTable.find("td").css("visibility", "hidden"); // Set minimum and maximum values $("#minTime").html(mintime + " am"); $("#maxTime").html(maxtime % 12 + " pm"); } $(".fc-agenda-slots").parent().append(slotsTable); $(".fc-slot0>th").html(""); var offset = slotsTable.find(".fc-slot0>th").offset(); $(".septimo").css("top", offset.top); $(".septimo").css("left", offset.left); $(".septimo").css("width", slotsTable.find(".fc-slot0>th").width()); offset = slotsTable.find("tr:last-child>th").offset(); $(".veintidos").css("top", offset.top + slotsTable.find("tr:last-child>th").height()); $(".veintidos").css("left", offset.left); $(".veintidos").css("width", slotsTable.find("tr:last-child>th").width()); try { setTimeline(); } catch (err) { } }, select: selectCallback, events: eventsCallback, eventRender: eventRenderCallback }); return calendar; }; function setTimeline(view) { var parentDiv = jQuery(".fc-agenda-slots:visible").parent(); var timeline = parentDiv.children(".timeline"); if (timeline.length == 0) { //if timeline isn't there, add it timeline = jQuery("<hr>").addClass("timeline"); parentDiv.prepend(timeline); } var curTime = new Date(); var curCalView = jQuery("#calendar").fullCalendar('getView'); if (curCalView.visStart < curTime && curCalView.visEnd > curTime) { timeline.show(); } else { timeline.hide(); return; } var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds(); var percentOfDay = curSeconds / 86400; //24 * 60 * 60 = 86400, # of seconds in a day var hgt = parentDiv.height(); var topLoc = Math.floor(parentDiv.height() * percentOfDay); timeline.css("top", topLoc + "px"); if (curCalView.name == "agendaWeek") { //week view, don't want the timeline to go the whole way across var dayCol = jQuery(".fc-today:visible"); var left = dayCol.position().left + 1; var width = dayCol.width() - 2; timeline.css({ //left: left + "px", //width: width + "px" }); } }; ```