diff --git a/README.md b/README.md index 923f60e..c83f200 100644 --- a/README.md +++ b/README.md @@ -21,31 +21,46 @@ ember g full-calendar }} ``` -### Actions +### Dynamic updates -To send actions to the calendar, register it with the controller. +To dynamically change calendars option please use the updateOptions attribute. +This attribute is an array of options that needs to be changed. + +```javascript +[ + {optionName: 'someOption', value: 'someValue'}, + {optionName: 'someAnotherOption', value: 'someAnotherValue'} +] +``` + +When the attribute will change from null to something it will run a function inside the component to update Full Calendar and then set back the updateOptions to null. + +For example: ```handlebars // app/templates/application.hbs {{ full-calendar events=events - register-as="accessToFullCalendar" + updateOptions=optionsToUpdate }} ``` ```javascript // app/controllers/application.js -export default Ember.Controller.extend({ - accessToFullCalendar: null, - actions: { - prev: function() { - this.get('accessToFullCalendar').send('prev'); - } - } -}); +this.set('optionsToUpdate', [{optionName: "height", value: 800}]); ``` +After setting optionsToUpdate as above it will send to Full Calendar: + +```javascript +component.$().fullCalendar('option', 'height', 800); +``` + +Any option allowed for Full Calendar dynamic change can be set this way. + +The previous way was to use register-as attribute to be able to access the component in the controller, but this has been deprecated as it will not work in the newer versions of ember.js. + ### Callbacks ```handlebars diff --git a/addon/components/full-calendar.js b/addon/components/full-calendar.js index b6096ca..47a2680 100644 --- a/addon/components/full-calendar.js +++ b/addon/components/full-calendar.js @@ -73,6 +73,39 @@ export default Component.extend({ // Selecting selectable: false, + // Update options array is used to change Full Calendar parameters after it was rendered. + // It consist of objects with optionName and value properties. + // + // This object is being observed and after a change FullCalendar function is run on existing Full Calendar. + // + // For Example: + // this.set('updateOptions', [{optionName: "height", value: 700}]); + // + // Will run function: + // fullCalendar('optionName', 'height', 700); + // + // After options has been updated the updateOptions attribute is set as null again. + updateOptions: null, + + // + // Observes and processes updateOptions. + updateOptionsObserver: Ember.observer('updateOptions', function() { + + let updateOptions = this.get('updateOptions'); + const component = this; + + if (updateOptions === null || updateOptions.get('length') === 0) { + return; + } + + updateOptions.forEach(function(option) { + component.$().fullCalendar('option', option.optionName, option.value); + }); + + this.set('updateOptions', null); + + }), + updateEvents: observer('events.[]', function() { var fullCalendarElement = this.$(); fullCalendarElement.fullCalendar('removeEvents'); @@ -82,9 +115,20 @@ export default Component.extend({ /** * Register this component to parent controller. We need this to be able to send actions from outside. + * */ didReceiveAttrs: function() { - this.set('targetObject.' + this.get('register-as'), this); + + let register = this.get('register-as'); + if (register !== null && typeof register !== "undefined" && parseInt(Ember.VERSION.split('.')[0]) >= 2) { + Ember.Logger.warn('DEPRECATION from ember-cli-full-calendar addon.' + + 'register-as has been depracated and will not work with ember.js 2.8 or newer.' + + 'Please use updateOptions instead.'); + } + + if (typeof this.get('targetObject') !== 'undefined' && this.get('targetObject') !== null) { + this.set('targetObject.' + this.get('register-as'), this); + } }, didInsertElement() { @@ -215,7 +259,7 @@ export default Component.extend({ // Day Rendering dayRender: (date, element, view) => { - this.sendAction('dayRender', date, element); + this.sendAction('dayRender', date, element, view); }, // Dragging & Resizing diff --git a/package.json b/package.json index a8c6085..bdab24e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-cli-full-calendar", - "version": "0.1.4", + "version": "0.1.5", "description": "An Ember wrapper for jQuery FullCalendar.", "directories": { "doc": "doc",