title: Fullcalendar events all showing at the current datetime
body: <p>I'm new to this, so please bear with me. I'll do my best to provide as much information as possible.</p>
  
  <p>I have a system which is using Entity Framework 6.1.1, jQuery UI (Combined Library) 1.11.1, and ASP.Net MVC 5.1.2 Database First. I have implemented FullCalendar version 2.0.4 by Adam Shaw, into my project which has to read events from the database and display it on the calendar. The way I have coded it is mainly for testing purposes before I use it properly, so I haven't really adhered to any naming conventions. I have searched through many websites looking for answers and I haven't found any so far.</p>
  
  <p>I am having a couple of problems with this though, but I'm not sure if I should ask both here or separate them into different threads. Firstly, all my events seem to be showing at the exact current date and time. For example, if I have event A which should show on 2014/08/24 and event B which should show on 2014/08/26, as stated in the database, when I run the application, they would all show at 20:01 2014/08/27 (the time i just typed out that text).</p>
  
  <p>Secondly, my events aren't draggable or droppable at all. See below for the code.</p>
  
  <p>This code is in my Model Class:</p>
  
  <pre><code>public partial class Event
  {
      public Event()
      {
          this.Bookings = new HashSet&lt;Booking&gt;();
          this.EventTags = new HashSet&lt;EventTag&gt;();
      }
  
      public int EventID { get; set; }
      public string EventName { get; set; }
      public string EventDays { get; set; }
      public Nullable&lt;System.TimeSpan&gt; EventStart { get; set; }
      public Nullable&lt;System.TimeSpan&gt; EventEnd { get; set; }
      public Nullable&lt;decimal&gt; EventDuration { get; set; }
      public Nullable&lt;int&gt; NumberOfEmployees { get; set; }
      public string EventLocation { get; set; }
      public string EventDescription { get; set; }
      public Nullable&lt;int&gt; EventRating { get; set; }
      public Nullable&lt;int&gt; QuestionnaireID { get; set; }
      public Nullable&lt;System.DateTime&gt; EventDateCreated { get; set; }
      public Nullable&lt;System.DateTime&gt; EventDateUpdated { get; set; }
      public string EventSupplier { get; set; }
      public string EventPicture { get; set; }
  
      public virtual ICollection&lt;Booking&gt; Bookings { get; set; }
      public virtual Questionnaire Questionnaire { get; set; }
      public virtual ICollection&lt;EventTag&gt; EventTags { get; set; }
  }
  </code></pre>
  
  <p>The dates that I am pointing to in the database is "EventDateCreated" and "EventDateUpdated". I am using "EventDateCreated" as "start" and "EventDateUpdated" as "end".</p>
  
  <hr>
  
  <p>This is the code that is in my controller:</p>
  
  <pre><code>public JsonResult GetSchedules() {
  
          var calendarObjects = new List&lt;object&gt;();
          double start;
          double end;
  
  
          foreach (var item in db.Events)
          {
  
  
              start = ToUnixTimestamp(Convert.ToDateTime(item.EventDateCreated));
              end = ToUnixTimestamp(Convert.ToDateTime(item.EventDateUpdated));
  
              calendarObjects.Add(new
              {
                  id = item.EventID,
                  title = item.EventName,
                  Start = start,
                  End = end,
                  allDay = false
              });
  
          }
          return Json(calendarObjects.ToArray(), JsonRequestBehavior.AllowGet);
  
      }
  
  private static long ToUnixTimestamp(DateTime date)
      {
          var ts = date.ToUniversalTime().Subtract(new DateTime(1970, 1, 1, 0, 0, 0));
          return (long)Math.Truncate(ts.TotalSeconds);
      }
  </code></pre>
  
  <p>The code shown here is looping through the database class Events, and getting all the event details. "EventDateCreated" and "EventDateUpdated" is sent to the method "ToUnixTimestamp" which converts the date into a UnixTimestamp, which then goes back to the "GetSchedules" method and assigns those dates to the "calendarObjects" list. Once all the details are assigned, it goes to the "return" code to send it to the view, which will then render the details on the calendar. Up to that "return" code, when hovering over the "calendarObjects.ToArray()", it shows all three events in my database, with all their details, including the different dates for each event.</p>
  
  <hr>
  
  <p>This is the code in my Index view:</p>
  
  <pre><code>&lt;script&gt;
  
      $(document).ready(function (e) {
  
          $('#calendar').fullCalendar({
  
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay'
              },
              defaultView: 'month',
  
              allDaySlot: false,
              timeFormat: 'H:mm',
              editable: true,
              disableDragging: false,
              droppable: true,
              selectable: true,
              slotMinutes: 15,
              dayClick: function (date, allDay, jsEvent, view) {
                  createEvent(date);
              },
              events: "/Events/GetSchedules",
  
  
          });
  
      });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Finally, the details are sent to this view, the Index view, which then renders the calendar. However, as mentioned, all the events are shown on the same day at exactly the same time as when i ran the application as shown in the link below:</p>
  
  <p><a href="http://pho.to/6uuhO" rel="nofollow">Calendar View</a></p>
  
  <p>Why aren't the events showing on their respective dates, and why can't I drag and drop them?</p>