title: jquery fullcalendar Draw a line on current time
body: <p>I want to display current time in jquery full calendar while slotMinutes is 15</p>
  <p><img src="https://i.stack.imgur.com/Oycau.jpg" alt="Calendar" /></p>
  <p><img src="https://i.stack.imgur.com/1XUSO.jpg" alt="Result" /></p>
  <p><strong>Below is my code for review</strong></p>
  <pre><code>    $.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: &quot;MMMM dd, yyyy{ - MMMM dd, yyyy}&quot; }, // Sep 7 - 13 2009 ,
              defaultView: &quot;agendaWeek&quot;,
              columnFormat: { week: 'dddd' },
              eventBackgroundColor: options &amp;&amp; options[&quot;eventBackgroundColor&quot;] ? options[&quot;eventBackgroundColor&quot;] : &quot;#FFEB00&quot;,
              eventBorderColor: &quot;#FFEB00&quot;,
              eventTextColor: options &amp;&amp; options[&quot;eventTextColor&quot;] ? options[&quot;eventTextColor&quot;] : &quot;#333333&quot;,
              axisFormat: 'h(:mm) tt',
              aspectRatio: 0.1,
              buttonText: { prev: '', next: '' },
              selectable: (selectCallback != null &amp;&amp; $.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 &lt; maxtime - mintime; i++) {
  
                          $(&quot;.fc-slot&quot; + (i * 2 + (i * 2 + 2)) + &quot;.fc-minor&gt;th&quot;).html(((mintime + i) &lt; 12 ? (mintime + i) : ((mintime + i) == 12) ? 12 : (mintime + i) % 12) + &quot;:30 &quot; + (mintime + i &lt; 12 ? &quot;am&quot; : &quot;pm&quot;));
                          $(&quot;.fc-slot&quot; + (i * 2 + (i * 2 + 2)) + &quot;.fc-minor&gt;th&quot;).addClass(&quot;innerHours&quot;);
  
                      }
                      // Set styles
                      slotsTable = $(&quot;.fc-agenda-slots&quot;).clone();
                      slotsTable.addClass(&quot;cloned&quot;);
                      slotsTable
                          .css(&quot;position&quot;, &quot;absolute&quot;)
                          .css(&quot;top&quot;, &quot;-12px&quot;)
                          .css(&quot;z-index&quot;, &quot;-100&quot;);
                      $(&quot;.fc-agenda-slots th&quot;).css(&quot;visibility&quot;, &quot;hidden&quot;);
                      slotsTable.find(&quot;td&quot;).css(&quot;visibility&quot;, &quot;hidden&quot;);
  
                      // Set minimum and maximum values
                      $(&quot;#minTime&quot;).html(mintime + &quot; am&quot;);
                      $(&quot;#maxTime&quot;).html(maxtime % 12 + &quot; pm&quot;);
  
                  } 
  
                  $(&quot;.fc-agenda-slots&quot;).parent().append(slotsTable);
                  $(&quot;.fc-slot0&gt;th&quot;).html(&quot;&quot;);
  
                  var offset = slotsTable.find(&quot;.fc-slot0&gt;th&quot;).offset();
                  $(&quot;.septimo&quot;).css(&quot;top&quot;, offset.top);
                  $(&quot;.septimo&quot;).css(&quot;left&quot;, offset.left);
                  $(&quot;.septimo&quot;).css(&quot;width&quot;, slotsTable.find(&quot;.fc-slot0&gt;th&quot;).width());
  
                  offset = slotsTable.find(&quot;tr:last-child&gt;th&quot;).offset();
                  $(&quot;.veintidos&quot;).css(&quot;top&quot;, offset.top + slotsTable.find(&quot;tr:last-child&gt;th&quot;).height());
                  $(&quot;.veintidos&quot;).css(&quot;left&quot;, offset.left);
                  $(&quot;.veintidos&quot;).css(&quot;width&quot;, slotsTable.find(&quot;tr:last-child&gt;th&quot;).width());
                  try {
                      setTimeline();
                  } catch (err) { }
              },
              select: selectCallback,
              events: eventsCallback,
              eventRender: eventRenderCallback
          });
          return calendar;
      };
      function setTimeline(view) {
          var parentDiv = jQuery(&quot;.fc-agenda-slots:visible&quot;).parent();
          var timeline = parentDiv.children(&quot;.timeline&quot;);
          if (timeline.length == 0) { //if timeline isn't there, add it
              timeline = jQuery(&quot;&lt;hr&gt;&quot;).addClass(&quot;timeline&quot;);
              parentDiv.prepend(timeline);
          }
  
          var curTime = new Date();
  
          var curCalView = jQuery(&quot;#calendar&quot;).fullCalendar('getView');
          if (curCalView.visStart &lt; curTime &amp;&amp; curCalView.visEnd &gt; 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(&quot;top&quot;, topLoc + &quot;px&quot;);
  
          if (curCalView.name == &quot;agendaWeek&quot;) { //week view, don't want the timeline to go the whole way across
              var dayCol = jQuery(&quot;.fc-today:visible&quot;);
              var left = dayCol.position().left + 1;
              var width = dayCol.width() - 2;
              timeline.css({
              //left: left + &quot;px&quot;,
              //width: width + &quot;px&quot;
          });
      }
  };
  </code></pre>