title: jQuery plugin Fullcalendar Current Time show
body: <p>I have read and added a question to this thread <a href="http://code.google.com/p/fullcalendar/issues/detail?id=143" rel="nofollow">http://code.google.com/p/fullcalendar/issues/detail?id=143</a> but its a bit old, so im asking here.</p>
  
  <p>I have followed the feedback from the thread, but i can't get my script to show the current Time for the Fullcalendar, all other things are working fine, its showing events and so on, but i can't get it to show current Time in week/day view, is there someone here that have some knowhow about this !?</p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/fullcalendar.css" rel="stylesheet" /&gt;
  &lt;link href="css/FCstyle.css" rel="stylesheet" /&gt;
  &lt;script src="js/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery-ui-1.9.0.js"&gt;&lt;/script&gt;
  &lt;script src="js/fullcalendar.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var date = new Date();
          var d = date.getDate();
          var m = date.getMonth();
          var y = date.getFullYear();
  
          $('#calendar').fullCalendar({
              theme: true,
              header: { left: "today prev,next", center: "title", right: "month,agendaWeek,agendaDay" }, weekends: true, allDayDefault: true, ignoreTimezone: true, lazyFetching: true,
              startParam: "start", endParam: "end", titleFormat: { month: "MMMM yyyy", week: "MMM d[ yyyy]{ '&amp;#8212;'[ MMM] d yyyy}", day: "dddd, MMM d, yyyy" },
              columnFormat: { month: "ddd", week: "ddd dd-MM", day: "dddd dd-MM" },
              // To change display time HH:mm
              // timeFormat: { '': 'HH:mm' }, isRTL: false,
              // To change first display date as monday
              firstDay: 1,
              monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
              monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
              dayNames: ["Søndag", "Mandag", "Tirsdag", "Onsdag", "Torsdag", "Fredag", "Lørdag"],
              dayNamesShort: ["Søn", "Man", "Tir", "Ons", "Tor", "Fre", "Lør"], buttonText: {
                  prev: "&amp;nbsp;&amp;#9668;&amp;nbsp;", next: "&amp;nbsp;&amp;#9658;&amp;nbsp;",
                  prevYear: "&amp;nbsp;&amp;lt;&amp;lt;&amp;nbsp;", nextYear: "&amp;nbsp;&amp;gt;&amp;gt;&amp;nbsp;",
                  today: "i dag", month: "måned", week: "uge", day: "dag"
              },
              allDayDefualt: false,
              allDaySlot: true, allDayText: "hele dagen", firstHour: 7, slotMinutes: 30, defaultEventMinutes: 120,
              axisFormat: 'H:mm',
              timeFormat: 'HH:mm{-HH:mm}',
              //timeFormat: { agenda: 'H:mm{ - HH:mm}' }, dragOpacity: { agenda: 0.5 }, minTime: 0,
              maxTime: 24,
              editable: true,
              disableDragging: true,
              disableResizing: true,
              droppable: true,
              drop: function (date, allDay, jsEvent, ui) {
                  console.log(jsEvent);
                  console.log(ui);
              },
  
              // Is used for current time START
              viewDisplay: function(view) {
                  window.clearInterval(timelineInterval);
                  timelineInterval = window.setInterval(setTimeline, 10000);
                  try {
                      setTimeline();
                  } catch(err) { }
              },
              // Is used for current time END
  
              // add event name to title attribute on mouseover
              eventMouseover: function (event, jsEvent, view) {
                  if (view.name == "month") {
                      $(jsEvent.target).attr('title', event.title);
                  }
                  //alert(event.id);
              },
  
              events: {
                  url: 'fullcalendarjson.ashx',
                  type: 'POST',
                  error: function () {
                      alert('there was an error while fetching events!');
                  }
              },
  
              selectable: true,
              selectHelper: true,
              select: function (start, end, allDay) {
                  alert("Cell selected from " + $.fullCalendar.formatDate(start, 'dd-MM-yyyy') + " to " + $.fullCalendar.formatDate(end, 'dd-MM-yyyy'));
              },
              eventClick: function (calEvent, jsEvent, view) {
                  if (!$(jsEvent.target).hasClass("icon")) {
                      alert("UserID:" + calEvent.id);
                  }
              }
  
          });
  
          // Is used for Current Time START
          function setTimeline() {
              var curTime = new Date();
              if (curTime.getHours() == 0 &amp;&amp; curTime.getMinutes() &lt;= 5) // Because I am calling this function every 5 minutes
              {// the day has changed
                  var todayElem = $(".fc-today");
                  todayElem.removeClass("fc-today");
                  todayElem.removeClass("fc-state-highlight");
  
                  todayElem.next().addClass("fc-today");
                  todayElem.next().addClass("fc-state-highlight");
              }
  
              var parentDiv = $(".fc-agenda-slots:visible").parent();
              var timeline = parentDiv.children(".timeline");
              if (timeline.length == 0) { //if timeline isn't there, add it
                  timeline = $("&lt;hr&gt;").addClass("timeline");
                  parentDiv.prepend(timeline);
              }
  
              var curCalView = calendar.fullCalendar("getView");
              if (curCalView.visStart &lt; curTime &amp;&amp; curCalView.visEnd &gt; curTime) {
                  timeline.show();
              } else {
                  timeline.hide();
              }
  
              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 = $(".fc-today:visible");
                  if (dayCol.position() != null) {
                      var left = dayCol.position().left + 1;
                      var width = dayCol.width();
                      timeline.css({
                          left: left + "px",
                          width: width + "px"
                      });
                  }
              }
          }
          // Is used for Current Time END
  
      });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
      /* Is used for Current Time CSS*/
      .timeline {
              position: absolute;
              left: 59px;
              border: none;
              border-top: 1px solid red;
              width: 100%;
              margin: 0;
              padding: 0;
              z-index: 999;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
      &lt;div id="calendar"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>