用meteor.js设置fullcalendar [英] Set a fullcalendar with meteor.js

问题描述

我对流星很陌生，我正在设置一个完整的日历。我正在使用Windows，并且我做了 meteor add fullcalendar：fullcalendar 但我无法呈现完整的日历...我已经阅读了很多教程，但仍然没有任何内容。这里是我使用的代码示例。
我不知道是否有办法检查fullcalendar软件包是否安装在我的应用程序中，或者如果我必须导入它...

main.js

$ b

 从'meteor / templating'导入{Template}; 
从'../lib/collections.js'导入{Notes}; 
 //从'fullcalendar'导入{fullCalendar}; 
 //从'时刻'导入{moment}; 
 
 
导入'./main.html'; 
 
 Template.body.helpers（{
 / * 
 notes：[
 {text：'My note 1'}，
 {text：'我的笔记2'}，
 {text：'我的笔记3'} 
] 
 * / 
 
笔记（）{
 return Notes.find （{}）; 
} 
}）; 
 
 $ b Template.add.events（{$ b $'submit .add-form'：function（）{
 event.preventDefault（）; 
 
 //获得输入值
 const target = event.target; 
 const text = target.text.value; 
 
 //将注释插入集合
 Notes.insert（{
 text，
 createdAt：new Date（）
}）; 
 
 //清除表单
 target.text.value =''; 
 
 //关闭模态
 $（'＃modal1'）。modal（'close'）; 
 
返回false; 
} 
}）; 
 
 Template.note.events（{
'click .delete-note'：function（）{
 Notes.remove（this._id）; 
 return false ; 
} 
}）; 
 
 Template.calendar.onRendered（）（{
 $（'＃calendario'）。fullCalendar（）; 
}）
  
 
 
 
 main.html 
 < head> 
< title>笔记管理员< / title> 
 <！ - 编译和缩小的CSS  - > 
< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css> 
< link href =https://fonts.googleapis.com/icon?family=Material+Icons =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-mobileclass =right hide-on-med-and-down> 
< li class =nav-item> 
 < / li> 
< / ul> 
< / div> 
< / div> 
< / nav> 
< div class =container> 
< h1> Nomes< / h1> 
< ul class =collection> 
 {{#each notes}} 
 {{> note}} 
 {{/ each}} 
< / ul> 
< / div> 
 
 
 {{> add}} 
 
 {{>日历}} 
 
 
 
 <脚本> 
 $（document）.ready（function（）{
 //模态触发器的href属性必须指定想要触发的模式ID 
 $（'。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 =modal1class =modal> 
< div class =modal-content> 
< h3>添加Nome< / h3> 
< form class =add-form> 
< input type =textname =textplaceholder =Add Nome ...> 
< / form> 
< / div> 
< / div> 
 
< / template> 
 
< template name =calendar> 
< div class =container> 
< div id =calendario> 
< / div> 
< / div> 
< / template> 
  
谢谢你们！
解决方案
  Template.TemplateName.rendered = function（）
  
函数你必须定义所有的东西，例如：event.event- eventRender，dayClick，eventAfterRender，viewRender，eventClick等等
 
 
我在Template.TemplateName.rendered = function（）中使用的示例代码
 
 $ $ p $ $ $ $' #calendar'）。fullCalendar（{
 // height：auto，
 minTime：OpenTime，
 maxTime：closeTime，$ b $ slotDuration：'00：15：00'， 
时区：Asia / Colombo，
 allDaySlot：false，
 dayOfMonthFormat：'ddd  -  DD MMM'，
 
 defaultView：'multiColAgendaDay'，
 views：{
 multiColAgendaDay：{
 // disabledColumns：[1]，
 type：'multiColAgenda'，
 duration：{days：1}，
 numColumns ：7，
 co lumnHeaders：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）=> {
 
返回事件; 
}）; 
  

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!

解决方案

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

这篇关于用meteor.js设置fullcalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！