Need help writing code for displaying dates

Question

I have an ajax code for grabbing Google Calendar events and I would like to Dynamically place two dates into the URL string that fetched from Google Calendar

The first date (timeMax=2021-02-28) should grab the current date and add 30 days to it The second date (timeMin=2021-02-15) should just gram the current date

My assumption is we would create to date variables one for the first date (timeMax) variable and another for (timeMin) variable. Then place these two variables into the associated URL tag.

Any help in what the code should be would be great. Thank you!

//Jquery's ajax request
$.ajax({
  type: 'GET',
  url: 'https://www.googleapis.com/calendar/v3/calendars/eaachapter309@gmail.com/events?singleEvents=true&maxResults=30&timeMax=2021-02-28T00:00:00Z&timeMin=2021-02-15T00:00:00Z&orderBy=startTime&key=my_secret_key_goes_here',
  dataType: 'json',
  async: true
}).done(function(data) {
  //once we get a successful response this callback function
  //gets fired, and "data" contains the parsed json file .

  //here we iterate over the object array
  $.each(data.items, function(i, item) {
    //I do this to later format these timestamps
    //set options for date.toLocaleDateString() function

    var options = {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    };

    let start = new Date(item.start.dateTime).toLocaleDateString('en-US', options);

    let end = new Date(item.end.dateTime).toLocaleDateString('en-US', options);

    let end_splt = end.split(',');

    //append data to the list.

    if (item.status != "cancelled") {
      $('table.isSearch tbody').append(`<tr mbr-list mbr-list-grow="tableColumns"><td class="body-item mbr-fonts-style display-7" width=15%>${item.summary}</td><td class="body-item mbr-fonts-style display-7" width=25%>${start} - ${end_splt[1]}</td><td class="body-item mbr-fonts-style display-7" width=60%>Location: ${item.location}<br><br>${item.description}</td></tr>`);
    }
  });

}).fail(function(e) {
  error(e);
});

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Does this answer your question? [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — Mark Schultheiss, Feb 18 '21 at 19:32

score 0 · Answer 1 · answered Feb 19 '21 at 21:11

Thank you Mark this did work with some other code adjusting. Appreciate the reference URL.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
  //function myDateFunction() {


    // Variable for Date Max in URL string
    var dateMax = new Date(); // Now
    dateMax.setDate(dateMax.getDate() + 30) // Set now + 30 days as the new date
    var dateStringMax = dateMax.toISOString().split('T')[0]

    // Variable for Date Min in URL string
    var dateMin = new Date(); // Now
    dateMin.setDate(dateMin.getDate()) // Set now + 30 days as the new date
    var dateStringMin = dateMin.toISOString().split('T')[0]

    // Set variable for url
    var urlCalendar = 'www.googleapis.com/calendar/v3/calendars/eaachapter309@gmail.com/events?singleEvents=true&maxResults=30&timeMax=ABC123T00:00:00Z&timeMin=XYZ123T00:00:00Z&orderBy=startTime&key=my_secret_key_goes_here';

    urlCalendar = urlCalendar.replace("ABC123", dateStringMax);
    urlCalendar = urlCalendar.replace("XYZ123", dateStringMin);
    urlCalendar = 'https://' + urlCalendar;

    //alert(urlCalendar); //Use for testing to ensure dynamic URL is generated
    //document.write(urlCalendar)
  //}
</script>
<script>
        //Jquery's ajax request

        $.ajax({
               type:'GET',
               url:urlCalendar,
               dataType: 'json',
               async:true
               }).done(function(data){
                       //once we get a successful response this callback function
                       //gets fired, and "data" contains the parsed json file .

                       //here we iterate over the object array
                       $.each(data.items, function(i, item){
                              //I do this to later format these timestamps
                              //set options for date.toLocaleDateString() function

                              var options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };

                              let start = new Date(item.start.dateTime).toLocaleDateString('en-US', options);

                              let end = new Date(item.end.dateTime).toLocaleDateString('en-US', options);

                              let end_splt = end.split(',');

                              //append data to the list.

                              if(item.status != "cancelled"){
                              $('table.isSearch tbody').append(`<tr><td class="body-item mbr-fonts-style display-7" width=15%>${item.summary}</td><td class="body-item mbr-fonts-style display-7" width=25%>${start} - ${end_splt[1]}</td><td class="body-item mbr-fonts-style display-7" width=60%>Location: ${item.location}<br><br>${item.description}</td></tr>`);
                              }
                              });

                       }).fail(function(e){
                               error(e);
                               });

                               var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        </script>

Need help writing code for displaying dates

1 Answers1