Set a fullcalendar with meteor.js

Question

i am new to meteor, and i am trying to set a full calendar. i am using windows, and i did the meteor add fullcalendar:fullcalendar but I can't render the fullcalendar... i have read so many tutorials so far but still nothing. here is a sample of the code that im using. I dont know if there is a way to check if the fullcalendar package did install in my app... or if I have to import it...

main.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();
})

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>


  {{>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>

thanks 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;
});

Set a fullcalendar with meteor.js

Question

1 answers

solution1
0 2018-01-30 10:52:01

Set a fullcalendar with meteor.js

Question

1 answers

solution1 0 2018-01-30 10:52:01

solution1
0 2018-01-30 10:52:01