Use a colleagues' browser settings to detect their time zone and update the date format and time to reflect the time in their time zone

Question

In the Events web part, the date displayed should reflect the date for the event based on the user’s time zone.

Can this be achieved by client side This is the sample events webpart:

I have till now achieved this: Bind the Events data table to a json object and passing it to client side. Events data table contains date which is fetched from data base,

row["Date"] = Convert.ToDateTime(item["EventDate"].ToString()).ToUniversalTime();

 EventsGrid.DataSource = eventsDataTable;
                EventsGrid.DataBind();
                string jsonServiceData = JsonConvert.SerializeObject(eventsDataTable);
                Controls.Add(
            new LiteralControl(@"<input type=""hidden"" id=""serviceData"" value='[" + jsonServiceData + "]'/> "));

On client side, ascx page of webpart this is script that calculates offsets and gives the converted date. But somehow the calculations are not giving correct result.

<script type="text/javascript">
$(document).ready(function () {
    ModifyDates();
});

function ModifyDates() {debugger;
    properties = document.getElementById('serviceData').value;
    properties = JSON.parse(properties);
    for (var i = 0; i < properties[0].length; i++) {
        var date = new Date(properties[0][i].Date);
        var offset = new Date().getTimezoneOffset();
        var newDate = new Date(date.getTime() + offset * 60 * 1000);

    }
}

What still needs to be done:

• how to bind the data back to grid and show it in webpart
• how to get the correct date.

Answer 1

this is how i solved it. It may be useful to someone in the future.

function ConverTimeZoneOnEventsList(){
 var url = window.location.href;
 debugger;
 if (url.indexOf('Lists/Events/DispForm.aspx') >= 0)
 {
  var dateElements = document.getElementsByName('SPFieldDateTime');
  for (var i = 0; i < dateElements.length; i++)
  {
   var temp = document.getElementsByName('SPFieldDateTime')[i].innerHTML;
   if (temp.indexOf("EventDate") != -1) 
        {
        var formStartDate = document.getElementsByName('SPFieldDateTime')[i].innerText;
        var OriginalStartdate = new Date(formStartDate);
        var utcStartDate = OriginalStartdate.toUTCString();
        var Startdate = convertUTCDateToLocalDate(new Date(utcStartDate));
        document.getElementsByName('SPFieldDateTime')[i].innerText = formatDate(Startdate); 
        }
        if (temp.indexOf("EndDate") != -1) 
        {       
        var formEndDate = document.getElementsByName('SPFieldDateTime')[i].innerText;
        var OriginalEnddate = new Date(formEndDate);
        var utcEndDate = OriginalEnddate.toUTCString();
        var Enddate = convertUTCDateToLocalDate(new Date(utcEndDate));
        document.getElementsByName('SPFieldDateTime')[i].innerText = formatDate(Enddate);       
        }
   }  
 }
}
    function convertUTCDateToLocalDate(date) {    
      var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
      var offset = date.getTimezoneOffset() / 60;
      var hours = date.getHours();
      newDate.setHours(hours - offset);
      return newDate;
    }

    function getTimezoneName() {
      timezone = jstz.determine();
      return timezone.name();
    }

    function formatDate(date){
    var timezone = getTimezoneName();

            var dd = date.getDate();
            var mm = date.getMonth() + 1; //January is 0
            var hh = date.getHours();
            var min = date.getMinutes();
            var yyyy = date.getFullYear();
            if (dd < 10) {
                dd = '0' + dd
            }
            if (mm < 10) {
                mm = '0' + mm
            }
            if (min <10){
                min = '0' + min
            }
            if ((timezone.indexOf("America") != -1) || (timezone.indexOf("Pacific") != -1)) {
                date = mm + '/' + dd + '/' + yyyy + " " + hh + ':' + min;           
            }
            else if ((timezone.indexOf("Shanghai") != -1) || (timezone.indexOf("Tokyo") != -1) || (timezone.indexOf("Yakutsk") != -1)) {
                date = yyyy + '/' + mm + '/' + dd + " " + hh + ':' + min;
            }
            else {
                date = dd + '/' + mm + '/' + yyyy + " " + hh + ':' + min;
            }
            return date;
    }