Add events in fullcalendar with meteor

Question

so I was able to create a fullcalendar in my application, but now I cant make the events show... this is my code

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>

I have found some tutorials, even here, but they dont work, my goal is to pass the information from the form in my modal to the events of the fullcalendar. Thanks for your help guys.

Answer 1

Inside

Template.TemplateName.rendered = function()

function you have to define all the things likes.eg-: eventRender,dayClick,eventAfterRender,viewRender,eventClick etc

sample code that I used inside 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;
});

Add events in fullcalendar with meteor

Question

1 answers

solution1
0 2018-01-30 10:42:02

Add events in fullcalendar with meteor

Question

1 answers

solution1 0 2018-01-30 10:42:02

solution1
0 2018-01-30 10:42:02