Question

所以我能够在我的应用程序中创建一个fullcalendar，但现在我不能让事件显示...这是我的代码

main.js

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



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.note.helpers({
  data:function(){
    return moment(this.date).format("dddd, h:mm");
  }
});


Template.example.helpers({
  options: function() {
      return {
          defaultView: 'agendaDay',
      };
  },
  events: function(){
    return{
      title  : 'event2',
      start  : '2018-28-01',
      allDay : false
    }
  }
});

main.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>
  <div class="container" id="container2">
    {{> example}}
  </div>


  {{>add}}




  <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}} - {{data}}
    <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="example">
  {{>fullcalendar options}}
</template>

我找到了一些教程，即使在这里，但它们不起作用，我的目标是将信息从我的模态中的表单传递给fullcalendar的事件。谢谢你的帮助。

Answer 1

内部

Template.TemplateName.rendered = function()

功能你必须定义所有的东西like.eg-：eventRender，dayClick，eventAfterRender，viewRender，eventClick等

我在Template.TemplateName.rendered = 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;
});

使用meteor在fullcalendar中添加事件

1 个答案: