Formatting Google Calendar event lists with jQuery techniques

Question

Formatting Google Calendar event lists with jQuery techniques

After spending all day trying to solve the problem of displaying a Google calendar in list format on my website, I finally found some code that works. However, there are still some formatting issues that I can't figure out. I'm not very familiar with jQuery, so I'm struggling to fix the formatting. I've tried adjusting things on the CSS side, but it seems like some of the issues are on the script side. If someone could help me clean up the formatting in the script and make it strictly CSS-based, that would be amazing! Or if you have a better solution, please share =)

Thank you so much!

The format I'm looking for is as follows, split into three sections within different divs:

Date: 'Nov 12, 09:00' | Event: 'Student Night' | Location: 'Nicci Beach'

Javascript Code:


// Generated by CoffeeScript 1.4.0
(function() {
  // Code here...
}).call(this);

HTML Template:

<div id="gcf-custom-template">
    <div class="gcf-item-container-block">
        <div class="gcf-item-block">
            <div class="gcf-item-header-block">
                <div class="gcf-item-title-block">
                    <div style="float: left; width 250px;"><a class="gcf-item-link"><span class="gcf-item-daterange">2012-02-01 09:00</span>:</a></div>
                    <div style="float: left; width 250px;"><a class="gcf-item-location">1-877-346-9707 w 55586#</a></div>
                    <div style="float: left; width 250px;"><strong><a class="gcf-item-title">Item Title of Your event</a></strong></div>
                </div>
            </div>
        </div>
    </div>
</div>

Script Call:

<script type="text/javascript">
    var $ = jQuery;
    $(function() {
        $('#gcf-custom-template').gCalFlow({
          calid: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="053171356834662b72353263456268646c692b666a68">[email protected]</a>',
          maxitem: 50,
          mode: 'updates',
          date_formatter: function(d, allday_p) { return (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getYear().toString().substr(-2) }
        });
      });
</script>

javascript jquery html css google-calendar-api

Answer 1

Answer №1

In solving a similar issue, I utilized moment.js for date formatting, markupjs for templating, and jQuery to simplify tasks.

// Custom pipe in markup.js using moment.js for formatting
Mark.pipes.moment = function (date, format) {
    return moment(new Date(date)).format(format);
};

// Another custom pipe in markup.js to compare if two dates are in the same month
Mark.pipes.diffmonth = function (date1, date2) {
  moment1 = moment(new Date(date1));
  moment2 = moment(new Date(date2));
  var ret= moment1.month()!=moment2.month();
  return ret;
};

// A filter pipe in markup.js for arrays
Mark.pipes.sift = function (arr, prop, val) {
  return $.grep(arr,function(item) {
    return item[prop] == val;
  });
};

$(document).ready(loadCalendarData);

// Fetching data from Google Calendar public JSON feed 
calendarURL = "http://www.google.com/calendar/feeds/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="093f7f7f3e7d6a7d31396e7f3c7d6b656861643c7a6e397f7a667a496e7b667c79276a68656c676d687b276e66666e656c276a6664">[email protected]</a>/public/full?alt=json-in-script&orderby=starttime&singleevents=true&sortorder=ascending&futureevents=true&callback=?";

function loadCalendarData() {
  $.getJSON( calendarURL, applyTemplate);
}

function applyTemplate(cal_data) {

  // Setting language to French for date formatting
  moment.lang("fr");

  // Extracting VCALENDAR fields from Google Calendar JSON feed and adding a type field for event distinction
  var events = $.map(cal_data["feed"]["entry"], function (event) {
    var url= $.grep(event["link"], function(link) {
      return link["rel"]=="related";
    });
    return {
      "summary": event["title"]["$t"],
      "dtstart": event["gd$when"][0]["startTime"],
      "dtend": event["gd$when"][0]["endTime"],
      "url": url[0]?url[0]["href"]:"",
      "location": event["gd$where"][0]["valueString"],
      "type": (moment.duration(new Date(event["gd$when"][0]["endTime"])-new Date(event["gd$when"][0]["startTime"])).as("hours")<18)?"single":"multi"
    };

  });

  // Adding template features for dynamic content display
  Mark.includes.linked_summary = "{{if url}}<a href='{{url}}'>{{/if}}{{summary}}{{if url}}</a>{{/if}}";
  Mark.includes.optional_location = "{{if location}}&nbsp;({{location}}){{/if}}"

  // Generating separate lists for different types of events based on start dates
  var template = 
    "Upcoming Events:<ul>{{events|sift>type>single}}"+ 
    "<li>{{dtstart|moment>dddd|capcase}} {{dtstart|moment>D/M}}: {{linked_summary}}{{optional_location}}</li>"+
    "{{/events}}</ul>"+
    "<br>"+
    "Multi-day Events Coming Up (2013/2014):<ul>{{events|sift>type>multi}}"+
    "<li>{{dtstart|moment>D}}{{if dtstart|diffmonth>`dtend`}}{{dtstart|moment>/M}}{{/if}}-{{dtend|moment>D/M}}: {{linked_summary}}{{optional_location}}</li>"+
    "{{/events}}</ul>";

  $("#web").html(Mark.up(template, {"events":events}));
}

Answer 2

In solving a similar issue, I utilized moment.js for date formatting, markupjs for templating, and jQuery to simplify tasks.

// Custom pipe in markup.js using moment.js for formatting
Mark.pipes.moment = function (date, format) {
    return moment(new Date(date)).format(format);
};

// Another custom pipe in markup.js to compare if two dates are in the same month
Mark.pipes.diffmonth = function (date1, date2) {
  moment1 = moment(new Date(date1));
  moment2 = moment(new Date(date2));
  var ret= moment1.month()!=moment2.month();
  return ret;
};

// A filter pipe in markup.js for arrays
Mark.pipes.sift = function (arr, prop, val) {
  return $.grep(arr,function(item) {
    return item[prop] == val;
  });
};

$(document).ready(loadCalendarData);

// Fetching data from Google Calendar public JSON feed 
calendarURL = "http://www.google.com/calendar/feeds/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="093f7f7f3e7d6a7d31396e7f3c7d6b656861643c7a6e397f7a667a496e7b667c79276a68656c676d687b276e66666e656c276a6664">[email protected]</a>/public/full?alt=json-in-script&orderby=starttime&singleevents=true&sortorder=ascending&futureevents=true&callback=?";

function loadCalendarData() {
  $.getJSON( calendarURL, applyTemplate);
}

function applyTemplate(cal_data) {

  // Setting language to French for date formatting
  moment.lang("fr");

  // Extracting VCALENDAR fields from Google Calendar JSON feed and adding a type field for event distinction
  var events = $.map(cal_data["feed"]["entry"], function (event) {
    var url= $.grep(event["link"], function(link) {
      return link["rel"]=="related";
    });
    return {
      "summary": event["title"]["$t"],
      "dtstart": event["gd$when"][0]["startTime"],
      "dtend": event["gd$when"][0]["endTime"],
      "url": url[0]?url[0]["href"]:"",
      "location": event["gd$where"][0]["valueString"],
      "type": (moment.duration(new Date(event["gd$when"][0]["endTime"])-new Date(event["gd$when"][0]["startTime"])).as("hours")<18)?"single":"multi"
    };

  });

  // Adding template features for dynamic content display
  Mark.includes.linked_summary = "{{if url}}<a href='{{url}}'>{{/if}}{{summary}}{{if url}}</a>{{/if}}";
  Mark.includes.optional_location = "{{if location}}&nbsp;({{location}}){{/if}}"

  // Generating separate lists for different types of events based on start dates
  var template = 
    "Upcoming Events:<ul>{{events|sift>type>single}}"+ 
    "<li>{{dtstart|moment>dddd|capcase}} {{dtstart|moment>D/M}}: {{linked_summary}}{{optional_location}}</li>"+
    "{{/events}}</ul>"+
    "<br>"+
    "Multi-day Events Coming Up (2013/2014):<ul>{{events|sift>type>multi}}"+
    "<li>{{dtstart|moment>D}}{{if dtstart|diffmonth>`dtend`}}{{dtstart|moment>/M}}{{/if}}-{{dtend|moment>D/M}}: {{linked_summary}}{{optional_location}}</li>"+
    "{{/events}}</ul>";

  $("#web").html(Mark.up(template, {"events":events}));
}

Formatting Google Calendar event lists with jQuery techniques

Answer №1

Similar questions

Can you provide instructions on creating a marker like this in an unordered list?

Jquery click event only firing once

The bootstrap modal display issue: black background visible

Using JavaScript with React to invoke an asynchronous action within a component

Vue3 TypeScript may potentially have an object that is 'undefined'

Can you explain the meaning of "|| [];"?

Show a SweetAlert message if a specific Div Class is not found within the page

Preserve the parameter navigation stored within a flatlist and showcase it on a separate screen

Looking for a JavaScript function that can utilize AJAX to execute PHP code and display the PHP output on the webpage

Establishing standard emit actions in a Vue JS component layout

Expect for a variety of Observables to finish at different times

JQuery parsing JSON syntax

Cannot get the "middle" div in CSS to properly wrap around its content

The subscription for the second Observable in RxJS concatMap is triggered individually

In Laravel, Inertia.js will automatically close a modal if there are no validation errors present

Struggling to integrate a Bootstrap theme into your Ruby on Rails application?

content organized in tabs using the fancybox feature

The result after calling JSON.parse(...) was not accurate

Preventing Double Click Events on jQuery Spinner

JSON parsing failed due to the occurrence of an unexpected token "<" at the beginning of the file