使用流星.js设置完整的日历

我是流星的新手，我正在尝试设置一个完整的日历。我正在使用 Windows，我做了meteor add fullcalendar:fullcalendar但我无法呈现完整日历...到目前为止，我已经阅读了很多教程，但仍然一无所获。下面是 IM 使用的代码示例。我不知道是否有办法检查完整日历包是否确实安装在我的应用程序中......或者如果我必须导入它...

主.js

import { Template } from 'meteor/templating';
import { Notes } from '../lib/collections.js';
//import { fullCalendar} from 'fullcalendar';
//import { moment } from 'moment';

import './main.html';
Template.body.helpers({
 /*
  notes:[
    {text: 'My note 1'},
    {text: 'My note 2'},
    {text: 'My note 3'}
  ]
  */
  notes(){
    return Notes.find({});
  }
});

Template.add.events({
  'submit .add-form': function(){
    event.preventDefault();
    //get input value
    const target = event.target;
    const text = target.text.value;
    //insert note into collection
    Notes.insert({
      text,
      createdAt: new Date()
    });
    //clear the form
    target.text.value = '';
    //close the modal
    $('#modal1').modal('close');
    return false;
  }
});
Template.note.events({
 'click .delete-note': function(){
   Notes.remove(this._id);
   return false;
 }
});
Template.calendar.onRendered()({
 $('#calendario').fullCalendar();
})

主.html

<head>
  <title>note manager</title>
   <!-- Compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<nav class="red">
  <div class="container">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Danillo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li class="nav-item">
            <a class="waves-effect waves-light btn modal-trigger" href="#modal1"> ADD Modal</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
  <div class="container">
      <h1>Nomes</h1>
      <ul class="collection">
      {{#each notes}}
      {{> note}}
      {{/each}}
    </ul>
  </div>

  {{>add}}
  {{>calendar}}

  <script>
      $(document).ready(function(){
          // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
          $('.modal').modal();
        });
        </script>
</body>
<template name="note">
  <li class="collection-item">
    {{text}}
    <a href="#" class="delete-note secondary-content"><i class="material-icons">close</i></a>
  </li>
</template>
<template name="add">
    <div id="modal1" class="modal">
        <div class="modal-content">
         <h3>Add Nome</h3>
         <form class="add-form">
           <input type="text" name="text" placeholder="Add Nome...">
         </form>
        </div>
      </div>
</template>
<template name ="calendar">
  <div class="container">
    <div id="calendario">
    </div>
  </div>
</template>

谢谢大家！

内部

Template.TemplateName.rendered = function()

函数，你必须定义所有的东西 likes.eg-：eventRender，dayClick，eventAfterRender，viewRender，eventClick 等

我在 Template.TemplateName.render = function(( 中使用的示例代码

$('#calendar').fullCalendar({
    //height: "auto",
    minTime: OpenTime,
    maxTime: closeTime,
    slotDuration: '00:15:00',
    timezone: "Asia/Colombo",
    allDaySlot:false,
    dayOfMonthFormat: 'ddd - DD MMM',
    defaultView: 'multiColAgendaDay',
    views: {
        multiColAgendaDay: {
            // disabledColumns: [1],
            type: 'multiColAgenda',
            duration: { days: 1 },
            numColumns: 7,
            columnHeaders: stylistDetails,
            /* disabledColumns: [1] */
        }
    },
    scrollTime: '09:00:00',
    allDaySlot: false,
   /* header: {
   left: 'multiColAgendaDay',
   center: 'title',
   right: 'today prev,next'
   }, */
  header:false, 
  dayOfMonthFormat: 'ddd - DD MMM',
  events( start, end, timezone, callback ) {
let filterBranchId = Session.get("filterBranchId");
let data = AppointmentsServices.find({branchId:filterBranchId,stylistDisabled: {$ne: true}}).fetch().map( ( event ) => {
return event;
});

相关内容

最新更新

热门标签：