title: Fullcalendar adding events across timezones
body: <p>I am clearly missing something completely fundamental regarding creating events in FullCalendar so am seeing if perhaps anyone has a solution or any advice.</p>
  
  <p><strong>Objective:</strong> Have a calendar function that counselors can use to let clients know what their opening times are (times are not full day and can be as short as one hour).</p>
  
  <p>The counselors and clients are not necessarily going to be in the same timezone so  the events must be created in a way to reflect the time appropriate to the individual time zones.</p>
  
  <p>For example, a counselor (in New Zealand) creates an available event starting at:</p>
  
  <pre><code>Friday, 1 March 2019 at 7:00:00 a.m.
  </code></pre>
  
  <p>The client in New York should see that event as:</p>
  
  <pre><code>Thursday, 28 February 2019 at 1:00:00 p.m
  </code></pre>
  
  <p>This is something that I am struggling to achieve and am not sure if it is even possible with FullCalendar</p>
  
  <p>The "timezone" option doesn't seem to make any difference when creating events (and yes, I perfectly accept that I might be doing something completely wrong).</p>
  
  <p>In this <a href="https://jsfiddle.net/Mhluzi/1t08qeLk/88/" rel="nofollow noreferrer">calendar</a> fiddle I have the timezone set as follows:</p>
  
  <pre><code>$('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      timezone: 'Pacific/Auckland'
      ....
  });
  </code></pre>
  
  <p>When I select 7am on March 1, 2019 FullCalendar generates the start date as UTC:</p>
  
  <pre><code>Fri Mar 01 2019 07:00:00 GMT+0000
  </code></pre>
  
  <p>If I use moment.tz to format that start date as Pacific/Auckland:</p>
  
  <pre><code>console.log(moment.tz(startDate, 'Pacific/Auckland').format());
  </code></pre>
  
  <p>I get:</p>
  
  <pre><code>2019-03-01T20:00:00+13:00
  </code></pre>
  
  <p>Which is a correct conversion of the original start date but obviously of no use in this instance as it is not the date expected.</p>
  
  <p>If I drag and drop an event to 7am March 1, 2019 (see same <a href="https://jsfiddle.net/Mhluzi/1t08qeLk/88/" rel="nofollow noreferrer">fiddle</a>) and then click on it to write out the event object to the console using:</p>
  
  <pre><code>eventClick: function(event, element) 
  {
      console.log("event: ");
      console.log(event);
  },
  </code></pre>
  
  <p>The following is displayed (shortened here for simplicity):</p>
  
  <pre><code>    "_fc3"
      _start 
      Fri Mar 01 2019 07:00:00 GMT+0000 {...}
      _a
      [2019, 2, 1, 4 more...]
      _ambigTime
      false
      _ambigZone
      true
     _d
     Fri Mar 01 2019 20:00:00 GMT+1300 (New Zealand Daylight Time) {}
  </code></pre>
  
  <p>So <strong>_start</strong> is Fri Mar 01 2019 07:00:00 GMT+0000 - which (ignoring the offset for now) is the time that it should be (as in, it should be 7am)</p>
  
  <p>and <strong>_d</strong> is  Fri Mar 01 2019 20:00:00 GMT+1300 (New Zealand Daylight Time) .</p>
  
  <p>But I clearly can't save the value of <strong>_d</strong> as that is obviously not the desired time in this instance.</p>
  
  <p>Also, if I save that _start date as it is to a MySQL datetime field it gets stored as "2019-03-01 07:00:00", (the MySQL server is set to UTC) and if I import that into the calendar it displays as 7am on March 1 2019 and doesn't factor in the user timezone.</p>
  
  <p>As always I have checked SO for possible answers but no answers seem to address this issue.</p>
  
  <p>As I said, I hope that I am just missing something fundamental.</p>
  
  <p>Any suggestions would be greatly appreciated.</p>
  
  <p><strong>EDIT:</strong> Updated fiddle</p>
  
  <p><strong>EDIT</strong> Added image and explanation</p>
  
  <p>In the <a href="https://jsfiddle.net/Mhluzi/1t08qeLk/88/" rel="nofollow noreferrer">fiddle</a> (described in this image):</p>
  
  <p><a href="https://i.stack.imgur.com/LjoP2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LjoP2.png" alt="image of fiddle"></a></p>
  
  <ol>
  <li>Drag this to 7am (for example)</li>
  <li>Click the event to access the event object </li>
  <li>this shows the time in 4. as UTC/GMT</li>
  <li>this shows the time in 6. as UTC/GMT</li>
  <li>this shows the time in 8. as New Zealand timezone (for me as I am in NZ)</li>
  </ol>
  
  <p>So I guess what I am missing here is how to get the public start property</p>
  
  <p>What I am looking for/expecting is a start time of:</p>
  
  <pre><code>Sat Mar 02 2019 07:00:00 GMT+1300 (New Zealand Daylight Time)
  </code></pre>
  
  <p>which is a UTC time of :</p>
  
  <pre><code>Friday, 1 March 2019 at 6:00:00 p.m. UTC
  </code></pre>
  
  <p>So that UTC Friday time is what I would expect to save in the database.</p>
  
  <p><strong>Note:</strong> I am actually in New Zealand so the fiddle will be different for anyone outside of that time zone. </p>