Javascript Google日历事件列表jQuery格式

我整天都在努力寻找一个好的解决方案，在我正在开发的网站上以列表格式显示谷歌日历。我遇到了这段代码，除了一些格式问题外，它运行得很好。我对jQuery不太了解，所以我正在努力格式化。我已经在CSS方面做了尽可能多的工作，但很明显，其中一些工作是在脚本方面。也许如果有人能帮我删除脚本中的格式，并严格使用css，那就太好了=）或者另一个更好的解决方案=P

非常感谢

我所追求的格式是不同分区中的3个部分： 日期（'11月12日09:00'）活动（'Student Night'）地点（'Nicci Beach'）

JS:

//由CoffeeScript 1.4.0生成
（功能（）{
var$，gCalFlow，log，methods，pad_zero，\u ref；
$=jQuery；
如果（（窗口类型！=“未定义”&&window！==null）和（（窗口、调试！=null）和（（控制台类型！=“未定义”&&console！==null））{
日志=控制台；
if（（_ref=log.debug）==null）{
log.debug=log.log；
}
}否则{
log={}；
log.error=log.warn=log.log=log.info=log.debug=function（）{}；
}
pad_zero=函数（数量、大小）{
变量i，ret，_i，_ref1；
如果（大小==null）{
尺寸=2；
}
if（10*（尺寸-1）0）{
debug（“目标节点有子节点，使用目标元素作为模板”）；
this.template=目标；
}
此。更新_opts（opts）；
}
gCalFlow.prototype.update\u opts=函数（新选项）{
调试（“调用了更新选项”）；
debug（“旧选项：”，this.opts）；
this.opts=$.extend（{}，this.opts，new_opts）；
返回log.debug（“新选项：”，this.opts）；
};
gCalFlow.prototype.gcal_url=函数（）{
如果（！this.opts.calid&&！this.opts.feed_url）{
log.error（“缺少选项calid和提要url。中止url生成”）；
this.target.text（“错误：您需要设置'calid'或'feed_url'选项”）；
抛出“gCalFlow:calid和提要url丢失”；
}
if（this.opts.feed_url）{
返回this.opts.feed_url；
}else if（this.opts.mode==='updates'）{
返回“https://www.google.com/calendar/feeds/“+this.opts.calid+”/public/full？alt=json-in-script&max-results=“+this.opts.maxitem+”&orderby=lastmodified&sortorder=descending”；
}否则{
返回“https://www.google.com/calendar/feeds/“+this.opts.calid+”/public/full？alt=json-in-script&max-results=“+this.opts.maxitem+”&orderby=starttime&futureevents=true&sortorder=singressing&singleevents=true”；
}
};
gCalFlow.prototype.fetch=函数（）{
var success\u handler，
_这个=这个；
debug（“为“+（this.gcal_url（））启动ajax调用”）；
success\u handler=函数（数据）{
调试（“Ajax调用成功。响应数据：”，数据）；
返回_this.render_data（data，_this）；
};
返回$.ajax({
success:success\u handler，
数据类型：“jsonp”，
url:this.gcal_url（）
});
};
gCalFlow.prototype.parse_date=函数（dstr）{
var日、小时、米、分钟、周一、偏移量、ret、秒、年；
if（m=dstr.match（/^（\d{4}）-（d{2}）-（d{2}）$/）{
返回新日期（parseInt（m[1]，10），parseInt（m[2]，10）-1，parseInt（m[3]，10），0，0，0）；
}
偏移量=（新日期（））.getTimezoneOffset（）*60*1000；
年=月=日=空；
小时=分钟=秒=0；
如果（m=dstr.match（/^（\d{4}）-（d{2}）-（d{2}）[T]（\d{2}）：（\d{2}）：（\d{2}（？：\.\d+）（Z{124;（[+-]）（\ d{2}）：（\d{2}））$/）{
年份=parseInt（m[1]，10）；
mon=parseInt（m[2]，10）；
day=parseInt（m[3]，10）；
小时=parseInt（m[4]，10）；
min=parseInt（m[5]，10）；
sec=parseInt（m[6]，10）；
如果（m[7]！=“Z”）{
偏移量+=（m[8]==“+”？1:-1）*（parseInt（m[9]，10）*60+parseInt（m[10]，10））*1000*60；
}
}否则{
log.warn（“时间分析错误！未知时间模式：+dstr”）；
返回新日期（1970,1,1,0,0,0）；
}
log.debug（“时间解析（到本地的间隙）：”+偏移量）；
ret=新日期（新日期（年、周一-1、天、小时、分钟、秒）.getTime（）-offset）；
调试（“时间解析：“+dstr+”->”，ret）；
返回ret；
};
gCalFlow.prototype.render_data=函数（数据）{
var ci，描述主体方法，ed，ent，et，etf，feed，ic，it，项目，链接，sd，st，stf，t，标题链接，标题链接，标题链接，标题i，标题，参考1，参考2；
调试（“开始呈现数据：”，数据）；
feed=data.feed；
t=this.template.clone（）；
titlelink=（\u ref1=this.opts.titlelink）！=null？\u ref1:“http://www.google.com/calendar/embed?src=“+this.opts.calid；
if（此.opts.link_标题）{
t、 查找（'.gcf title'）.html（$（“
1-877-346-9707 w 55586#
活动的项目标题

脚本调用：

<script type="text/javascript">
      var $ = jQuery;
      $(function() {
        $('#gcf-custom-template').gCalFlow({
          calid: '4t0m1c.w07f@gmail.com',
          maxitem: 50,
          mode: 'updates',
          date_formatter: function(d, allday_p) { return (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getYear().toString().substr(-2) }
        });
      });
    </script>

var$=jQuery；
$（函数（）{
$（“#gcf自定义模板”）.gCalFlow({
校准：4t0m1c。w07f@gmail.com',
最大项目：50，
模式：“更新”，
日期格式化程序：函数（d，allday）{return（d.getMonth（）+1）+“/”+d.getDate（）+“/”+d.getYear（）.toString（）.substr（-2）}
});
});

以下是我对类似问题的解决方案，使用jQuery进行日期格式设置、模板制作，并使用jQuery进行常规处理，从而简化了工作

// a markup.js pipe which calls on moment.js for formatting
Mark.pipes.moment = function (date, format) {
    return moment(new Date(date)).format(format);
};

// a markup.js pipe that tests if two dates are in the same month (difference between "1st-2nd december" and "30 november - 2 december")
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 markup.js pipe to filter an array
Mark.pipes.sift = function (arr, prop, val) {
  return $.grep(arr,function(item) {
    return item[prop] == val;
  });
};

$(document).ready(loadCalendarData);

// this is a google calendar public full json feed (to have complete date and location information) 
calendarURL = "http://www.google.com/calendar/feeds/6vv7tct80gv5tblahm5sg0vsos@group.calendar.google.com/public/full?alt=json-in-script&orderby=starttime&singleevents=true&sortorder=ascending&futureevents=true&callback=?";

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

function applyTemplate(cal_data) {

  // format dates in french
  moment.lang("fr");

  // take cal_data, a google calendar json full feed. and extract VCALENDAR fields. Also extract a type field that distinguishes single day events from multiple day events.
  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"
    };

  });

  // summary with url link if exists
  Mark.includes.linked_summary = "{{if url}}<a href='{{url}}'>{{/if}}{{summary}}{{if url}}</a>{{/if}}";
  // location in brackets if exists
  Mark.includes.optional_location = "{{if location}}&nbsp;({{location}}){{/if}}"

  // separate list of evenings and multiple day/weeked events
  var template = 
    "Les soir&eacute;es &agrave; venir :<ul>{{events|sift>type>single}}"+ 
    "<li>{{dtstart|moment>dddd|capcase}} {{dtstart|moment>D/M}}: {{linked_summary}}{{optional_location}}</li>"+
    "{{/events}}</ul>"+
    "<br>"+
    "Les stages et weekends &agrave; venir (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}));
}

//一个markup.js管道，它调用moment.js进行格式化
Mark.pipes.moment=函数（日期、格式）{
返回时刻（新日期（日期））。格式（格式）；
};
//测试两个日期是否在同一个月的markup.js管道（“12月1日至2日”和“11月30日至12月2日”之间的差异）
Mark.pipes.diffmonth=函数（日期1，日期2）{
力矩1=力矩(
<script type="text/javascript">
      var $ = jQuery;
      $(function() {
        $('#gcf-custom-template').gCalFlow({
          calid: '4t0m1c.w07f@gmail.com',
          maxitem: 50,
          mode: 'updates',
          date_formatter: function(d, allday_p) { return (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getYear().toString().substr(-2) }
        });
      });
    </script>

// a markup.js pipe which calls on moment.js for formatting
Mark.pipes.moment = function (date, format) {
    return moment(new Date(date)).format(format);
};

// a markup.js pipe that tests if two dates are in the same month (difference between "1st-2nd december" and "30 november - 2 december")
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 markup.js pipe to filter an array
Mark.pipes.sift = function (arr, prop, val) {
  return $.grep(arr,function(item) {
    return item[prop] == val;
  });
};

$(document).ready(loadCalendarData);

// this is a google calendar public full json feed (to have complete date and location information) 
calendarURL = "http://www.google.com/calendar/feeds/6vv7tct80gv5tblahm5sg0vsos@group.calendar.google.com/public/full?alt=json-in-script&orderby=starttime&singleevents=true&sortorder=ascending&futureevents=true&callback=?";

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

function applyTemplate(cal_data) {

  // format dates in french
  moment.lang("fr");

  // take cal_data, a google calendar json full feed. and extract VCALENDAR fields. Also extract a type field that distinguishes single day events from multiple day events.
  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"
    };

  });

  // summary with url link if exists
  Mark.includes.linked_summary = "{{if url}}<a href='{{url}}'>{{/if}}{{summary}}{{if url}}</a>{{/if}}";
  // location in brackets if exists
  Mark.includes.optional_location = "{{if location}}&nbsp;({{location}}){{/if}}"

  // separate list of evenings and multiple day/weeked events
  var template = 
    "Les soir&eacute;es &agrave; venir :<ul>{{events|sift>type>single}}"+ 
    "<li>{{dtstart|moment>dddd|capcase}} {{dtstart|moment>D/M}}: {{linked_summary}}{{optional_location}}</li>"+
    "{{/events}}</ul>"+
    "<br>"+
    "Les stages et weekends &agrave; venir (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}));
}