1

I'm currently using a script to display calendar events with some added styling. It's originally from: Display Calendar Events From SharePoint Calendar Lists Using Rest API

I'm running into an issue when trying to open the event hyperlink in a modal dialog versus the link taking over the window. It errors at the line below with the message:

"value is not defined."

function openCalEvent ()
  {
    varWebUrl = _spPageContextInfo.webAbsoluteUrl;
    var itemLink = webUrl + '/Lists/calendar/view.aspx?ID=' + value.ID + '&Source=' + webURL;
    
    SP.UI.ModalDialog.showModalDialog({url:itemLink, title:"Event", width: 625}); }

The full script is at: JSFiddle link

My question is how do to pass the the item ID to make my hyperlink work? Thank you for any pointers. I'm not an expert in this by any means!

1 Answer 1

0

First of all, change your REST endpoint URL to this:

var RestUrl = webUrl + "/_api/web/lists/getbyTitle('Calendar')/items?$select=*&$filter=EventDate gt datetime'" + today.toISOString() + "'" + "&$orderby=EventDate asc";

Then use itemLink like:

var itemLink = webUrl + '/Lists/Calendar/DispForm.aspx?ID=' + value.Id + '&Source=' + webUrl;

Update from comments:

Here is full working code:

<link rel="stylesheet" href="https://spexplorer.sharepoint.com/sites/SPConnect/SiteAssets/CSS/calendar.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    var webUrl = _spPageContextInfo.webAbsoluteUrl;
    GetCalendar(webUrl);
  });

  function GetCalendar (webUrl) {
    var today = new Date();

    var RestUrl =
      webUrl + "/_api/web/lists/getbytitle('Calendar')/items?$select=*";
    $.ajax({
      url: RestUrl,
      method: "GET",
      headers: {
        accept: "application/json;odata=verbose",
      },
      success: function (data) {
        var resultsArray = data.d.results;

        var monthNames = [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sept",
          "Oct",
          "Nov",
          "Dec",
        ];
        var dayNames = [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday",
        ];

        for (var i = 0; i < resultsArray.length; i++) {
          var value = resultsArray[i];
          var title = value.Title || " ";
          var d = new Date(value.EventDate);
          var startDate, startMonth, startTime, endTime;
          var fAllDayEvent = value.fAllDayEvent;

          //check if all day event
          if (!fAllDayEvent) {
            startDate = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
            startDate = "<span class='eventDay'>" + startDate + "</span>";
            startMonth =
              "<span class='eventMonth'>" +
              monthNames[d.getMonth()] +
              "</span>";
            startDay = dayNames[d.getDay()];
            startTime = formatAMPM(d);
            endDate = new Date(value.EndDate);
            endDate = formatAMPM(endDate);
            startDate =
              "<div class='eventDate'>" + startMonth + startDate + "</div>";
            startTime =
              "<span class='eventTime'>" +
              startDay +
              " " +
              startTime +
              " - " +
              endDate +
              "</span>";
          } else {
            d.setTime(d.getTime() + 4 * 60 * 60 * 1000); //all day events are parsed -4hours by JS so adding 4 hrs
            startDate = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
            startDate = "<span class='eventDay'>" + startDate + "</span>";
            startMonth =
              "<span class='eventMonth'>" +
              monthNames[d.getMonth()] +
              "</span>";
            startDay = dayNames[d.getDay()];
            startDate =
              "<div class='eventDate'>" + startMonth + startDate + "</div>";
            startTime =
              "<span class='eventTime'>" + startDay + " - All Day " + "</span>";
          }

          var html =
            "<tr><td>" +
            startDate +
            "</td><td>" +
            '<a href="javascript:openCalEvent(' +
            value.Id +
            ');">' +
            '<div class="divTitle"><span class="eventTitle">' +
            title +
            "</span>" +
            startTime +
            "</a>" +
            "</td></tr>";

          $("#calendarTable tbody").append(html);
        }
      },

      error: function (xhr, status, error) {
        console.log("****Error: GetCalendar Failed. Error Msg: " + error);
      },
    });
  }

  function formatAMPM (date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? "PM" : "AM";
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? "0" + minutes : minutes;
    var strTime = hours + ":" + minutes + " " + ampm;
    return strTime;
  }

  function openCalEvent (ID) {
    var webUrl = _spPageContextInfo.webAbsoluteUrl;
    var itemLink = webUrl + "/Lists/Calendar/DispForm.aspx?ID=" + ID;

    SP.UI.ModalDialog.showModalDialog({
      url: itemLink,
      title: "Event",
      width: 625,
    });
  }
</script>
<div class="wrapper">
  <div class="headerDiv">
    <img
      src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/1.2.3/src/icon-calendar.svg"
      alt=""
    />
    <span class="headerSpan"> Office Events </span>
  </div>
  <table id="calendarTable">
    <tbody></tbody>
  </table>

  <div class="divViewAll">
    <a href="/Lists/Calendar/calendar.aspx"> View All </a>
  </div>
</div>

You can make changes like list name, Source parameter in URL, etc. as per your requirements.

6
  • Also, try to use for() instead of $.each if possible. Sep 29, 2022 at 13:46
  • Thanks! I made those changes but the same error still occurs. Is it because value.ID is part of the AJAX call and therefore can't be referenced later on?
    – Robert
    Sep 29, 2022 at 14:16
  • you can pass the item ID directly as a parameter to your function from inside $.each loop. Sep 29, 2022 at 14:29
  • How do I do that? Sorry I'm very new to this. Would I add that inside the function openCalEvent?
    – Robert
    Sep 29, 2022 at 14:35
  • Check my updated answer with full working code and try it. Let me know if you still need help with it. Sep 30, 2022 at 5:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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