rzymek / meteor-fullcalendar Goto Github PK

Does this port work the same way with Google Calendar integration? http://fullcalendar.io/docs/google_calendar/

Is there something in the package's css that's overriding event background and border colors? Can't seem to set them to what I want no matter what I do. I see other fullcalendar repos seem to have the colors set to the default blue in the packaged css, is this one the same? If so, can we get that rule taken out so we can customize event colors?

https://atmospherejs.com/mrt/fullcalendar

meteor admin set-unmigrated mrt:fullcalendar
meteor admin maintainers <your_username>:<your_package> --remove mrt

I want to update the event info (db) by using "eventClick", but don't know the collection id

eventClick: function(event, element) {
//
 },

Hi there, I've tried using this package to output events and no matter which format I try and use I can't seem to output any events at all.

I've tried using a basic array of objects as well as using a function. You wouldn't happen to have a basic example for a basic Meteor collection would you?

Thanks!

Hi, i can't refetch events.

I've tried everything to make the calendar reactive, but i noticed that the function $('.fc').fullCalendar('refetchEvents') does not return or does nothing.

The best i could do was this call $('.fc').fullCalendar('destroy') before $('.fc').fullCalendar(events).

I need some help with this );

I am using this package in meteor. I have my custom button named month. I want to show calendar on that custom button click event. Any help is appreciated!

Error dump is below. Perhaps the issue is the old version of momentjs your package installs, when I already have momentjs 2.18.1 installed from npm?

TypeError: units.toLowerCase is not a function at normalizeUnits (http://localhost:3000/packages/momentjs_moment.js?hash=76d88106d32bc66d1746f0b021b152e1edcdd15d:638:33) at Moment.set (http://localhost:3000/packages/momentjs_moment.js?hash=76d88106d32bc66d1746f0b021b152e1edcdd15d:2574:21) at Moment.newMomentProto.stripTime (http://localhost:3000/packages/rzymek_fullcalendar.js?hash=b21f2ed094a6dfe021d6208c2878dc0d136d713f:1335:8) at members.constructor.normalizeCurrentRange (http://localhost:3000/packages/rzymek_fullcalendar.js?hash=b21f2ed094a6dfe021d6208c2878dc0d136d713f:10642:16) at members.constructor.buildCurrentRangeInfo (http://localhost:3000/packages/rzymek_fullcalendar.js?hash=b21f2ed094a6dfe021d6208c2878dc0d136d713f:10627:8) at members.constructor.buildDateProfile (http://localhost:3000/packages/rzymek_fullcalendar.js?hash=b21f2ed094a6dfe021d6208c2878dc0d136d713f:10557:22) at constructor.updateToolbarButtons (http://localhost:3000/packages/rzymek_fullcalendar.js?hash=b21f2ed094a6dfe021d6208c2878dc0d136d713f:12450:24) at members.constructor.executeDateRender (http://localhost:3000/packages/rzymek_fullcalendar.js?hash=b21f2ed094a6dfe021d6208c2878dc0d136d713f:9618:17) at http://localhost:3000/packages/rzymek_fullcalendar.js?hash=b21f2ed094a6dfe021d6208c2878dc0d136d713f:9531:10 at constructor.runTaskFunc (http://localhost:3000/packages/rzymek_fullcalendar.js?hash=b21f2ed094a6dfe021d6208c2878dc0d136d713f:2401:13) undefined

A version with fullcalendar-scheduler v1.9.1 included would be very handy.

Although there is an example folder provided, the example files does not work. Other than showing a very simple calendar, the example is not adding any event to the database nor showing any event in a database. Since I am new to this, I really couldn't get it to work without a point of reference.

I am a new for this package.
I would to add/show or remove task on calendar with due date.
And then example it can alert message before 1 hour of due date.
Please help me.

The latest one is 3.7.0.
Could you please update this package with latest fullcalendar so it is available to use from meteor add?

thanks,

Hey there, running througth some troubles...

Template.agenda.helpers({
    options() {
        let events = Events.findOne() && Events.findOne().events;
        let calendar = {
            titleFormat: 'MMM D YYYY',
            header: {
                left: 'prev',
                center: 'title',
                right: 'today ,next'
            },
            defaultView: 'month',
            events: events,
            eventClick: function (calEvent, jsEvent, view) {
                Session.set('eventId', calEvent._id);
                Modal.show('editevent');
            },
            eventDrop: function (event, delta, revertFunc) {
                Meteor.call('events.update', {
                    title: event.title,
                    _id: event._id,
                    start: event._start._d,
                    end: event._end._d
                });
            },
            dayClick: function (date, jsEvent, view) {
                Session.set('clicked-date', date._d);
                Modal.show('addnew');
            }
        };
        $('#calendar').fullCalendar('refetchEvents'); // using this perfom absolutly nothing
        return calendar
    },

});`

<template name="agenda">
    {{#if Template.subscriptionsReady}} {{> fullcalendar options id="calendar" }} {{else}} {{> spinner}} {{/if}}
</template>

Also, when i add a new event, i perform :
$('#calendar').fullCalendar('renderEvent', result);

Somehow, template doesn't update until i refresh manualy the page.. anyone encouring the same problem ?

Hello,
i have a question. Is it possible to change the design of the calendar, so it just shows the number of the day as field ? And if it's possible, how can i do it ?
It should look something like this:

Thanks !

In my home don't have internet, so I need the pdf docs?

hi,
I'm adding events after the calendar template is created (via the 'events' call back), but the events are only shown when I click on 'next' and not after the 'events' callback...

so I thought using 'rerenderEvents', but how to call it in the client code?

thanks,

tinto

My page shows a table of events, or a full calendar of events. The switch is controlled by a button which drives a session variable.

If I arrive on the page in table mode, it draws the table. When I press the button to full calendar mode the session variable is changed and it draws the full calendar, and also does a refetchEvents reactively.

The problem is that the refetch events seems to be called before the id of the full calendar is known, so it doesn't get set up correctly.

How can I know when the full calendar id is in the dom so I can call refetch events?

Note that if I arrive on the page in calendar mode, all is good because my code to call refetchEvents is in onRendered(). But it doesnt work if I switch to calendar mode after the page was rendered, even if I wrap the refetch code in an autorun - the id is not there yet.

Hey!
I'm having an issue when trying to get the calendar.
What I'm getting is: Cannot read property 'localeData' of undefined at getMomentLocaleData
function getMomentLocaleData(localeCode) { return moment.localeData(localeCode) || moment.localeData('en'); }
I have moment installed...

Thanks!

Hello,

I would like to add an event by clicking on a day. I tried to add "dayClick: function() { .... } in the helpers by nothing happens.

Can you help me?

Thanks

I am trying to get the calendar rendered like it is explained in the README. I keep getting this error:

Exception from Tracker afterFlush function:
debug.js:41 TypeError: Cannot read property 'id' of null
    at Template.fullcalendar.rendered (template.js:4)
    at template.js:116
    at Function.Template._withTemplateInstanceFunc (template.js:457)
    at fireCallbacks (template.js:112)
    at null.<anonymous> (template.js:205)
    at view.js:107
    at Object.Blaze._withCurrentView (view.js:538)
    at view.js:106
    at Object.Tracker._runFlush (tracker.js:497)
    at onGlobalMessage (setimmediate.js:102)

Hello,

I am using this package and I am experiencing some problems when using the callback from the events function. Here is the code:

events: function(start, end, callback){
var eventos = Aulas.find().fetch();
console.log(eventos);
callback(eventos);
}

And the error:

Any clue on what is going wrong?

Thanks in advance

Hello
I would like to be able to use the listWeek view from FullCalendar.
Whatever I do I get the following error:

Exception from Tracker afterFlush function:
TypeError: spec.class is not a constructor
    at Calendar_constructor.instantiateView (rzymek_fullcalendar.js?hash=943b863…:9296)
    at renderView (rzymek_fullcalendar.js?hash=943b863…:9678)
    at initialRender (rzymek_fullcalendar.js?hash=943b863…:9623)
    at Calendar_constructor.render (rzymek_fullcalendar.js?hash=943b863…:9587)
    at HTMLDivElement.<anonymous> (rzymek_fullcalendar.js?hash=943b863…:85)
    at Function.each (jquery.js?hash=c57b3cf…:442)
    at jQuery.fn.init.each (jquery.js?hash=c57b3cf…:194)
    at jQuery.fn.init.$.fn.fullCalendar (rzymek_fullcalendar.js?hash=943b863…:64)
    at Blaze.TemplateInstance.Template.fullcalendar.rendered (rzymek_fullcalendar.js?hash=943b863…:12970)
    at blaze.js?hash=983d07a…:3341

I'm using Meteor version 1.4.2.3.
Thanks for any help!

Here is a small working example to see the behaviour:
meteor create testFC
cd testFC
meteor add rzymek:fullcalendar

main.html:

<head>
  <title>testFC</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>
  {{> calendar}}
</body>

calendar.html

<template name="calendar">
  {{> fullcalendar options}}
</template>

calendar.js

Template.calendar.helpers({
  options: function(){
    return {
      defaultView: 'listWeek',
    }
  }
});

I have a calendar working fine, except that it does not seem to recognize scrollTime option.
Maybe its a conflict with router-autoscroll?

Would be nice to update to 2.7.2, because of fullcalendar/fullcalendar#3152
and the changes listed in https://github.com/fullcalendar/fullcalendar/blob/master/CHANGELOG.md#v272-2016-05-20.

hi,

using the latest version like this

<template name="weekStripe">
    <div class="container" style="margin-top: 70px;">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">
                    {{> fullcalendar options}}
                </div>
            </div>
        </div>
    </div>
</template>

  Template.weekStripe.helpers ({
    options: function () {
      return {
        defaultView: 'basicWeek',
        firstDay: 1,
        height: 150
      }
    },

    dayClick: function (date, jsEvent, view) {
      alert('a day has been clicked!');
    }
  });

dayClick is not called in my case

am I missing something required?

cheers

I have collection called Requests in my project. One of its attributes is stored as follow : "requestedDateTime": "August 11, 2017 at 3:27 AM"

Is it possible to query the date and time from Requests collection to the fullCalendar?

And is there any documentation I can refer to about this package?

HI : How can I add a new language support to the calendar ?
I like to add fa (Farsi) language support. I be glad to do all the translations and submit a resource file.

Tom

As you don't use this plugin on specific elements with content, we should create a {{> fullCalendar}} helpers that takes a couple of options/settings.

It should create the <div class=".calendar"></div> dom and initalize the fullcalendar plugin with the provided options.

Hi,

Can you please update this package to 3.4.0?

Thank you

I think that you may have to remove it from the .versions file.

I'm following your code from the meteor example in gitHub (very few changes made; have added eventDrop in my template helper just under onEventClicked (which works fine):

`

onEventClicked: function() {
return function(calEvent, jsEvent, view) {
alert("Event clicked: "+calEvent.title);
$(this).css('border-color', 'red');
}
},

onEventDrop: function(event, delta, revertFunc) {
alert(" was dropped on " + event);
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
`

in my template, I have the following:

          `{{> fullcalendar
                          class="mainCalendar"
                          defaultView='month'
                          height="100%"
                          events=events
                          eventClick=onEventClicked
                          editable=true
                          eventDrop=onEventDrop
             }}`

the eventDrop fires on load for each event (not sure why), but when moving/dropping a calendar item on to another day, no event helpers are fired.

Do I have the event defined in the wrong place? Should it be in onRendered? First time use of this package, and finding it difficult to know where to use it in Meteor vs. Jquery initializations where there is much more documentation.

Please advise.

FULL JS FILE BELOW:

`
Template.calendar.rendered = function () {
var fc = this.$('.fc');
this.autorun(function () {
//1) trigger event re-rendering when the collection is changed in any way
//2) find all, because we've already subscribed to a specific range
Events.find();
fc.fullCalendar('refetchEvents');
});
};

Template.calendar.helpers({
events: function () {
var fc = $('.fc');
return function (start, end, tz, callback) {
//subscribe only to specified date range
Meteor.subscribe('events', start.toDate(), end.toDate(), function () {
//trigger event rendering when collection is downloaded
fc.fullCalendar('refetchEvents');
});

      //find all, because we've already subscribed to a specific range
      var events = Events.find().map(function (it) {
          return {
              title: it.date.toISOString(),
              start: it.date,
              allDay: true
          };
      });
      callback(events);
  };
},
onEventClicked: function() {
  return function(calEvent, jsEvent, view) {
      alert("Event clicked: "+calEvent.title);
      $(this).css('border-color', 'red');
  }
},
onEventDrop: function(event, delta, revertFunc) {

    //alert(" was dropped on " + event);

    if (!confirm("Are you sure about this change?")) {
        revertFunc();
    }

}

});

Template.calendar.events({
'click .addEvent': function () {
Meteor.call('insertEvent', function(error, result){
// display error to the user and abort
if (error)
throwError("Error on event insert");

  });
},
'click .removeEvent':function() {
    var event = Events.findOne();
    if(event) {
        Events.remove(event._id);
    }
}

});

`

https://github.com/fullcalendar/fullcalendar/releases/tag/v2.6.0

thanks

add {{>fullcalendar}} to my template causes an error which says no such template exists as 'fullcalendar'

I have added the package...

how to reactive data when I insert/update/remove data on db??
Please example.

I'm trying to import my calendar and yet I just get the blank calendar even if I only add a few basic options.
How do we do this?

I'd also like to know if you're working to get the package with Full Calendar 2.2.3 soon :)

Hi there,

I have been trying to implement select

{{> fullcalendar id="plannerCalendar" selectable=true events=plannerEvents select=plannerSelect defaultView="agendaWeek" height=1500 }}

and

Template.plannercalendar.helpers({
    plannerSelect: function (start, end) {
        console.log('planner select ...');

but 'planner select' never get called ...

any clue?

meteor: v1.3.x

Just looking for a little guidance here with the added node module support in the latest meteor releases. My thoughts are related to modifying the wrappers you have provided but rather using npm to install fullcalendar under the node_modules directory:

Get the latest fullcalendar release and update package.json:
meteor npm install -save fullcalendar

Add import statement to some client/main.js file:
import fullcalendar from 'fullcalendar';

Probably some other things to change but is this the correct road to go down with the added npm support in meteor now? Thanks in advance for any help.

Hi there, would it be possible at all to provide a very basic example where the options are passed as a helper and not directly on the html component (as per the example folder)?

You mention it in your docs but I'm having trouble getting any of the options to work (such as header). When I add them directly to the component, things seem to work but some options (such as header) I presume can only be set in JS.

I'm trying to set something like this in my template:

{{>fullcalendar options=options events=events}}

but seemingly the events will be picked up but not the options.

Full JS below:

Template.adminLessons.helpers({
  options: function() {
    return {
      defaultView: 'agendaWeek',
      header: {
        left: 'prev,next,today',
        center: 'title',
        right: 'agendaWeek,month,agendaDay'
      }
    };
  },
  events: function() {
    var fc;
    fc = $('.mainCalendar');
    return function(start, end, tz, callback) {
      var lessons;
      Meteor.subscribe('lessons', start.toDate(), end.toDate(), function() {
        return fc.fullCalendar('refetchEvents');
      });
      lessons = _.map(Lessons.find().fetch(), function(event) {
        return {
          title: event.title,
          start: event.start,
          end: event.end,
          className: event.type,
          id: event._id
        };
      });
      return callback(lessons);
    };
  },
  onEventClicked: function() {
    return function(calEvent, jsEvent, view) {
      return Router.go('adminLesson', {
        _id: calEvent.id
      });
    };
  },
  onDayClicked: function() {
    return function(date, jsEvent, view) {
      Session.set('addingEvent', true);
      $('input#title').focus();
      Session.set('addingEventClass', 'active');
      Session.set('addingEventDate', moment(date._d).format('YYYY-MM-DD'));
      Session.set('addingEventStartTime', moment(date._d).format('HH:mm'));
      return Session.set('addingEventEndTime', moment(date._d).add(1, 'hours').format('HH:mm'));
    };
  }
});

Template.adminLessons.rendered = function() {
  var fc;
  fc = this.$('.fc');
  return this.autorun(function() {
    Lessons.find();
    return fc.fullCalendar('refetchEvents');
  });
};

Would be great if you could see where I'm going wrong, thanks.

Any ideas on how to make this reactive?

Can you update to the latest version? The new version support touch on mobile.

I keep getting errors:

momentjs_moment.js:186 Uncaught TypeError: config._d.getTime is not a function
Moment @ momentjs_moment.js:186
clone @ momentjs_moment.js:1848
newMomentProto.clone @ rzymek_fullcalendar.js:926
moment_format__toISOString @ momentjs_moment.js:1944
EJSON.stringify @ ejson.js:343
stringify @ reactive-dict.js:6
_.extend.set @ reactive-dict.js:61
Template.events.helpers.options.eventClick @ visits.js:40
trigger @ rzymek_fullcalendar.js:8308
fc.View.Class.extend.trigger @ rzymek_fullcalendar.js:6635
Grid.mixin.bindSegHandlers.$.each.click @ rzymek_fullcalendar.js:3647
(anonymous function) @ rzymek_fullcalendar.js:3665
jQuery.event.dispatch @ jquery.js:4665
jQuery.event.add.elemData.handle @ jquery.js:4333

Can you kindly help? @rzymek

Can you please update fullcalendar and also show me how to update locally so I don't have to be coming to you áll the time.

I tried to follow this To update fullcalendar version run ./update.sh but was not sure where to run that command from.
where can I locate the source files so i replace the calendar.js file with the latest one. I am thinking that will be the easiest way to update. No?

Thanks.

Hi, update fullcalendar to latest version, please

How can I render events stored in a collection?
I can find the events but they don't render on the package's calendar (only my google calendar events are rendering).

{{> fullcalendar
class="mainCalendar"
id="myCalendar"
defaultView='month'
height="100%"
events=events
eventClick=onEventClicked
eventDrop=onEventDrop
eventResize=onEventResize
dayClick=onDayClick
editable=true
* header=[?]*

}}

Note, it appears that if I set the options in the template, I can't also set them on rendered which is where I have the below code which seems to be overwritten or ignored. thanks!

$('#myCalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});

Fullcalendar no longer relies on jquery-ui as of this release: https://github.com/arshaw/fullcalendar/releases/tag/v2.1.0

mrt:jquery-ui is several versions behind since it's no longer supported, and have been causing me version conflict errors.

hello, please help me fix this issue with subscription not working. I used your exact code and only changed the collection name, but mongol show no subscription. Thanks .

`Template.RenderCalendar.helpers({
calId: 'clndr',
options: function () {
return {
events: function () {
var fc = $(this.calId);
// var fc = $('.fc');
return function (start, end, tz, callback) {
//subscribe only to specified date range
Meteor.subscribe('appointments', start.toDate(), end.toDate(), function () {
//trigger event rendering when collection is downloaded
fc.fullCalendar('refetchEvents');
});

                //find all, because we've already subscribed to a specific range
                var events = Appointments.find().map(function (it) {
                    return {
                        title: it.date.toISOString(),
                        start: it.date
                    };
                });
                callback(events);
            };
        }            
    };
}

});
Template.RenderCalendar.rendered = function () {
var calendar = $(this.calId);
//trigger event re-rendering when the collection is changed in any way
this.autorun(function () {
//2) find all, because we've already subscribed to a specific range
Appointments.find();
calendar.fullCalendar('refetchEvents');
});
};`

how ever if i use something like below, the subsription works, but i am unable to get the fullcalendar instance to be able to properly subscribe to a range using fc's start, end properties.

`events: function () {
var fc = $(this.calId);
// var fc = $('.fc');
return function (start, end, tz, callback) {
//subscribe only to specified date range
Meteor.subscribe('appointments', start.toDate(), end.toDate(), function () {
//trigger event rendering when collection is downloaded
fc.fullCalendar('refetchEvents');
});

                //find all, because we've already subscribed to a specific range
                var events = Appointments.find().map(function (it) {
                    return {
                        title: it.date.toISOString(),
                        start: it.date
                    };
                });
                callback(events);
          };
       }`

I have my code in a calendar.js file as follows:

var calendar = $('#calendar').fullCalendar({
    dayClick: function(date, jsEvent, view){
        var newEvent = {};
        newEvent.start = date._d;
        newEvent.end = date._d;
        newEvent.title = "New Event";
        Meteor.call('saveCalEvent', newEvent);
    }
});

The server-side method will insert a new Event Object at that date, but it is of little relevance because the code crashes before that line. I repeatedly receive the Uncaught TypeError: m._d.getTime is not a function at moment.js:93 in my console and am unable to continue. I was reading that this might be due to the my moment.js version, it is currently at 2.11.2 and my fullCalendar version is at 2.6.0

Any assistance would be greatly appreciated; the console error is screenshotted below: