2

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.

events web part enter image description here

  • what version of SP is this? can you show me a screen shot of the web part you are adding? I'm thinking the best way to handle this might be a custom jQuery solution. – jpollar Jun 26 '15 at 17:08
  • It is SP2010. Added the Screen Shot. – Deepika Jun 27 '15 at 8:33
  • I need to see what web part you are adding from the ribbon. Did you create a list called Events and then add that list to the page? There's no such thing as an "Events Web Part". – jpollar Jun 27 '15 at 23:03
  • the webpart is custom webart. it takes the data from a custom list and shows the data. The dates are picked up from the list. Added the code for the webpart – Deepika Jun 29 '15 at 6:17
  • is it a gridview? – jpollar Jun 29 '15 at 14:47
0

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;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.