Framework7 - Calendar Events

by Maiki Nahara

HTML

<script src="https://unpkg.com/framework7/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/framework7/css/framework7.bundle.min.css">
<div id="app">
  <div class="panel panel-left panel-cover theme-dark">
    <div class="page"></div>
  </div>
  <div class="panel panel-right panel-reveal theme-dark">
    <div class="page"></div>
  </div>
  <div class="view view-main ios-edges">
    <div class="page" data-name="home">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="link panel-open" data-panel="left">Left Panel</a>
          </div>
          <div class="title sliding">My App</div>
          <div class="right">
            <a href="#" class="link panel-open" data-panel="right">Right Panel</a>
          </div>
        </div>
      </div>
      <!-- Toolbar-->
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#" class="link">Left Link</a>
          <a href="#" class="link">Right Link</a>
        </div>
      </div>
      <div class="page">
        <div class='page-content'>
          <div class='list'>
            <ul>
              <li>
                <a href="/calendar-page/" class="item-link item-content">
                  <div class="item-inner">Go to calendar</div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

#app {

  border: 1px solid gray;
}

#calendar,
#calendar-events {
  height: 50%;
  box-sizing: border-box;
}

#calendar .calendar {
  height: 100%;
}

#calendar-events ul {
  height: 100%;
  overflow: auto;
}

#calendar-events .event-color {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
}

@media (orientation: landscape) {
  #calendar {
    float: left;
  }

  #calendar,
  #calendar-events {
    height: 100%;
  }

  #calendar,
  #calendar-events {
    width: 50%;
  }

  #calendar-events {
    margin-left: 50% !important;
    border-left: 1px solid #eee;
  }

  .theme-dark #calendar-events {
    border-left-color: #282828;
  }
}

JavaScript

var app = new Framework7({
  root: '#app',
  theme: 'ios',
  routes: [{
    path: '/calendar-page/',
    component: {
      template: `
  <div class="page">
    <div class="navbar no-shadow">
      <div class="navbar-inner sliding">
        <div class="navbar-bg"></div>
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title navbar-calendar-title"></div>
      </div>
    </div>
    <div class="page-content">
    	<button class='button' @click='loadEventsAsync'>Load Events</button>
      <div id="calendar" class="block block-strong no-padding no-margin no-hairline-top"></div>
      <div id="calendar-events" class="list no-margin no-hairlines no-safe-area-left">
        <ul>
          {{#each eventItems}}
            <li class="item-content">
              <div class="event-color" style="background-color: {{color}}"></div>
              <div class="item-inner">
                <div class="item-title">{{title}}</div>
                <div class="item-after">{{time}}</div>
              </div>
            </li>
          {{else}}
            <li class="item-content">
              <div class="item-inner">
                <div class="item-title text-color-gray">No events for this day</div>
              </div>
            </li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
      `,
      data: function() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        return {
          eventItems: [],
          today: new Date(year, month, day),
          events: []
        }
      },
      methods: {
      	loadEventsAsync () {
        var self = this
        var app = self.$app;
          app.preloader.show()
          setTimeout(function () {
          var date = new Date();
          var year =...