sorin-davidoi / fullcalendar-calendar

Web Component wrapper for FullCalendar

fullcalendar-calendar

Web Component wrapper for FullCalendar.

Documentation and demo available here.

⚠️ This is no longer maintained and will not be ported to Polymer 2/3. However, PRs are welcomed for bugfixes. ⚠️

Install

bower install --save fullcalendar-calendar

Usage

<link rel="import" href="fullcalendar-theme.html">
<link rel="import" href="fullcalendar-calendar.html">

<style>
  #calendar {
    --fullcalendar: {
      background: white;
    }

    --fullcalendar-borders: {
      border-color: black;
    }

    --fullcalendar-day-numbers: {
        color: black;
    }

    --fullcalendar-day-headers: {
        color: black;
        font-weight: 500;
    }

    --fullcalendar-today: {
        background: black;
    }

    --fullcalendar-event: {
        background-color: magenta;
        border-color: magenta;
    }
  }
</style>

<fullcalendar-calendar id="calendar"></fullcalendar-calendar>

<fullcalendar-calendar></fullcalendar-calendar>

fullcalendar-calendar.html includes all the required dependencies (jQuery, moment and FullCalendar). However, since these libraries do not provide HTML import files, the Javascript files are loaded directly. This may prove problematic if you use any of the libraries in other part of your project, since you will load them twice. If this is the case, use fullcalendar-calendar-no-deps.html, which includes just the WebComponent wrapper, without the dependencies. However, you must now load the dependencies yourself:

<!-- The order is important, jquery and moment must come before fullcalendar -->
<script src='jquery/dist/jquery.min.js'></script>
<script src='moment/min/moment.min.js'></script>
<script src='fullcalendar/dist/fullcalendar.min.js'></script>

<link rel="import" href="fullcalendar-theme.html">
<link rel="import" href="fullcalendar-calendar-no-deps.html">

For all the options please consult the documentation.

fullcalendar-calendar's Issues

<fullcalendar-calendar></fullcalendar-calendar> would not appear if you don't provide options attribute

<fullcalendar-calendar></fullcalendar-calendar> would not appear if you don't provide options attribute.

As result the default example in documention (README.md) will not work.

In Safar & Firefox the theme doesn't get applied

Thanks again for this element!!

The css seems not to get applied.

No `day-render` event.

Missing day-render event, which allow backgrond of the day cells to use different color.

Not showing up inside certain iron-pages

If the page of fullcalendar-calendar is not the first page of iron-pages when the page loads initially, the calendar doesn't show up. To make it show up, you have to change e.g. the view.

<iron-pages selected="0">
  <section>Page 1</section>
  <section><fullcalendar-calendar></fullcalendar-calendar></section>
  <section>Page 3</section>
</iron-pages>

Thanks for your work @sorin-davidoi!

FullCalendarBehaviorImplementation not defined after vulcanization

Hello,

Thank you for this useful component!

I've encountred an issue after vulcanization of my application (no issues before vulcanization). The page won't load and the console shows an unexpected error: FullCalendarBehaviorImplementation is not defined.

I was able to fix that by modifying:
full-calendar-behavior:

• line 9: FullCalendarBehaviorImplementation => var FullCalendarBehaviorImplementation
• line 465: FullCalendarBehavior => Polymer.FullCalendarBehavior

fullcalendar-calendar and fullcalendar-calendar-no-deps:

• Set behaviors: behaviors: [ Polymer.FullCalendarBehavior ]

With those modifications, the component and my app are working before and after vulcanization.

Feel free to contact me if you need further information.

Best regards,
Arslan

Support for Polymer 2.0

We have successfully used fullcalendar-calendar with Polymer1.0. It is however not running using Polymer 2.0.
Will fullcalendar-calendar be updated for using with Polymer 2.0?
Thanks.

Can we move jquery fullcalendar and moment in to dependencies bower.json?

Can we move jquery fullcalendar and moment in to dependencies in bower.json?

Dynamically set a calendar's option after initialization

Is there a equivalent custom element's method to dynamically set a calendar's option using the equivalent native fullcalendar's code below:-

$('#calendar').fullCalendar('option', 'aspectRatio', 1.8);

eventSources not displaying

Hello and thank you for this element which is so much needed in the Polymer world.

I have an issue displaying events from a json-source. I see the request being made, but no event show up.

My json source returns:

[ {
	title : "Discover fullcalendar-calendar",
	start : "20171009T102010Z",
	end : "20171009T232010Z"
} ]

And this is my element:

<dom-module id="calendarevent-list">

	<template>
	<style is="custom-style"></style>
	<fullcalendar-calendar id="calendar" options="{{options}}" view="{{view}}"></fullcalendar-calendar>
	</template>

	<script type="text/javascript">

		Polymer({
			is : "calendarevent-list",
			properties : {
 				options: {
 					type: Object,
 					value : {
						"firstDay" : 1,
						"buttonIcons" : false
					}
 				},
 				view: {
 					type: String,
 					value: "basicWeek" // This strangely does not have any effect, the view stays "month"
 				}
			},
			ready: function() {
				var eventSources = [
					{ url: '/resources/js/events.json', color: 'yellow', textColor: 'black' }
				];
				this.set("options.eventSources", eventSources);
			}
		});

	</script>

</dom-module>

Do you have an idea what's wrong?

gotoDate()

Thanks so much for this element. I'm wondering, how can I have the calendar highlight the date I'm clicking? The following doesn't work:

<link rel="import" href="bower_components/fullcalendar-calendar/fullcalendar-theme.html">
<link rel="import" href="bower_components/fullcalendar-calendar/fullcalendar-calendar.html">

<dom-module id="calendar-element">
  <template>
    <fullcalendar-calendar id="calendar" on-day-click="clickDay"></fullcalendar-calendar>
  </template>
  <script>
    Polymer({
      is: 'calendar-element',
      clickDay: function(event) {
	this.$.calendar.gotoDate(event.detail.date);
      },
    });
  </script>
</dom-module>

I've also tried passing the gotoDate() an ISO string.

We're using Polymer 1.9.3.

Adding events to options.events

Thank you very much for developing this awesome Web Component wrapper for full calendar, I'm using it to develop an application for recording Time & Travel for my employer. It's worked great for me so far & I'll likely send you some contributions in the near future.

One thing that I haven't been able to get working is that when I push a new event object onto the options.events array, the calendar does not render the new event. This is the case even when I invoke the render() method just after pushing the new event into the options.events array. The project code in question is available here & I'm happy to answer further questions if they arise.

Drag & Select Events - weird behavior

Thanks for this element!!

Do you know by any chance how to fix drag and select events?

e.g. with these options:

          header: false,
          selectable: true,
          select: function(start, end) {
            debugger;
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
              eventData = {
                title: title,
                start: start,
                end: end
              };
              $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendar').fullCalendar('unselect');
          }.bind(this),
          editable: true,
          eventLimit: true, // allow "more" link when too many events

          events: 
            [
              { title: 'Discover fullcalendar-calendar', start: moment() },
              { title: 'Install fullcalendar-calendar', start: moment().add(2, 'day') },
              { title: 'Play around with fullcalendar-calendar', start: moment().add(4, 'days'), end: moment().add(5, 'days') },
              { title: 'Star fullcalendar-calendar on Github', start: moment().add(7, 'days'), end: moment().add(7, 'days').add(25, 'minutes') }
            ]
          }