calendar.ejs

<link rel="stylesheet" href="https://npm.webcache.cn/fullcalendar/dist/fullcalendar.min.css">
<link rel="stylesheet" href="https://npm.webcache.cn/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://npm.webcache.cn/@fortawesome/fontawesome-free@5.9.0/css/all.min.css">
<style>
  .fc-bg, .fc-content-skeleton thead {
    color: transparent;
  }
</style>
<script src="https://npm.webcache.cn/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="https://npm.webcache.cn/fullcalendar/dist/locale/zh-cn.js"></script>
<script src="https://npm.webcache.cn/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://npm.webcache.cn/popper.js@1.15.0/dist/umd/popper.min.js"></script>

<div id="Calendar"></div>

<template>
<%-
  JSON.stringify(
    posts.map(({ title, description, permalink, categories, start, end }) => {

      if (categories.data.some(item => RegExp(item.name, 'i').test(type)))
        return {
          title,
          detail: description,
          url:    permalink,
          start,
          end
        };
    }).filter( Boolean )
  )
%>
</template>

<script>
  $('#Calendar').fullCalendar({
    themeSystem: 'bootstrap4',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    eventLimit: true,
    events: JSON.parse(
      document.currentScript.previousElementSibling.innerHTML.trim()
    ),
    eventRender: function(eventObj, $el) {
      $el.popover({
        title: eventObj.title,
        content: eventObj.detail || '',
        trigger: 'hover',
        placement: 'top',
        container: 'body'
      });
    }
  });
</script>

<%- page.content %>