scoutforpets / ember-fullcalendar Goto Github PK
View Code? Open in Web Editor NEWAn Ember Component for FullCalendar and FullCalendar Scheduler
License: MIT License
An Ember Component for FullCalendar and FullCalendar Scheduler
License: MIT License
I'm trying to change the defaultView of the calendar. Is it possible to access the underlying calendar object?
These are my header settings
header: {
left: 'prev,next,today,waitList',
center: 'title',
right: 'month,basicWeek,basicDay,agendaWeek,agendaDay,listYear,listMonth,listWeek,listDay,timelineDay,timelineWeek,timelineMonth,timelineYear'
}
And this is my template:
{{full-calendar events=calendarEvents views=views header=header eventRender=(action 'eventRender') eventClick=(action 'eventClicked') defaultTimedEventDuration = '01:00:00' eventLimit=6 resources=resources resourceAreaWidth=230 resourceLabelText='Rooms' defaultView='listYear' defaultDate='2017-11-02'}}
I am unable to view all the views that are provided by scheduler i.e. timelineDay,timelineWeek,timelineMonth,timelineYear.
Is there something that I am doing wrong?
Because it is organized to mirror the documentation, some options are duplicated. Examples include minTime
, maxTime
and scrollTime
. Because of how these are handled, it seems entirely benign, except for the wasted time and memory.
I'm not sure if anyone really cares, or maybe it is known or intentional. I thought I'd point it out in case it was unintentional and unwanted.
fullCalendarOptions: [
// general display
'header', 'customButtons', 'buttonIcons', 'theme', 'themeButtonIcons', 'firstDay', 'isRTL', 'weekends', 'hiddenDays',
'fixedWeekCount', 'weekNumbers', 'weekNumberCalculation', 'businessHours', 'height', 'contentHeight', 'aspectRatio',
'handleWindowResize', 'eventLimit',
// timezone
'timezone', 'now',
// views
'views',
// agenda options
'allDaySlot', 'allDayText', 'slotDuration', 'slotLabelFormat', 'slotLabelInterval', 'snapDuration', 'scrollTime',
'minTime', 'maxTime', 'slotEventOverlap',
// current date
'nowIndicator',
// text/time customization
'lang', 'timeFormat', 'columnFormat', 'titleFormat', 'buttonText', 'monthNames', 'monthNamesShort', 'dayNames',
'dayNamesShort', 'weekNumberTitle', 'displayEventTime', 'displayEventEnd', 'eventLimitText', 'dayPopoverFormat',
// selection
'selectable', 'selectHelper', 'unselectAuto', 'unselectCancel', 'selectOverlap', 'selectConstraint',
// event data
'events', 'eventSources', 'allDayDefault', 'startParam', 'endParam', 'timezoneParam', 'lazyFetching',
'defaultTimedEventDuration', 'defaultAllDayEventDuration', 'forceEventDuration',
// event rendering
'eventColor', 'eventBackgroundColor', 'eventBorderColor', 'eventTextColor', 'nextDayThreshold', 'eventOrder',
'eventLimitClick',
// event dragging & resizing
'editable', 'eventStartEditable', 'eventDurationEditable', 'dragRevertDuration', 'dragOpacity', 'dragScroll',
'eventOverlap', 'eventConstraint', 'longPressDelay',
// dropping external elements
'droppable', 'dropAccept',
// timeline view
'resourceAreaWidth', 'resourceLabelText', 'resourceColumns', 'slotWidth', 'slotDuration', 'slotLabelFormat',
'slotLabelInterval', 'snapDuration', 'minTime', 'maxTime', 'scrollTime',
// resource data
'resources', 'eventResourceField',
// resource rendering
'resourceOrder', 'resourceGroupField', 'resourceGroupText',
// vertical resource view
'groupByResource', 'groupByDateAndResource'
],
Hello,
Just in case someone is facing a huge performance penalty with this addon and ember version 2.7 (and above), you definitely should try to disable prototype extension for arrays :
Add this in your EmberENV
variable in config/environment.js :
EXTEND_PROTOTYPES:
{
Array: false,
},
I realized this while updating an app displaying more than 200 events, from ember 2.6 to 2.7. Display time suddenly jumped from 300ms to 2.5s.
Something must have changed in the way Ember handles __proto__
property in arrays, and it seems to make events rendering awfully slow in Fullcalendar.
You should read this post though, to be aware of the consequences ;-)
There is perhaps another way to fix this, but I have no time to investigate furher...
I had to change line 123 in full-calendar.js in order to fix this problem:
it was:
Object.assign(
this.get('options'),
this.get('hooks')
);
the above fails on IE11.
I replaced it with:
$.extend(Object,this.get('options'),this.get('hooks'));
this works in IE and does not break Chrome nor FF.
using ember-cli: 2.5.0
PS C:\wrk\git\ember-fullcalendar> ember t
Built project successfully. Stored in "C:\wrk\git\ember-fullcalendar\tmp\core_object-tests_dist-Dv0zock6.tmp".
ok 1 Chrome 52.0 - JSHint | app.js: should pass jshint
ok 2 Chrome 52.0 - JSHint | controllers/application.js: should pass jshint
ok 3 Chrome 52.0 - JSHint | helpers/destroy-app.js: should pass jshint
ok 4 Chrome 52.0 - JSHint | helpers/module-for-acceptance.js: should pass jshint
ok 5 Chrome 52.0 - JSHint | helpers/resolver.js: should pass jshint
ok 6 Chrome 52.0 - JSHint | helpers/start-app.js: should pass jshint
ok 7 Chrome 52.0 - Integration | Component | full calendar: it renders
ok 8 Chrome 52.0 - Integration | Component | full calendar: it renders events
not ok 9 Chrome 52.0 - Integration | Component | full calendar: replacing events rerenders events
---
actual: >
3
expected: >
2
stack: >
at Object. (http://localhost:7357/assets/tests.js:304:12)
at Object.wrapper (http://localhost:7357/assets/test-support.js:6634:29)
at runTest (http://localhost:7357/assets/test-support.js:2779:28)
at Object.run (http://localhost:7357/assets/test-support.js:2764:4)
at http://localhost:7357/assets/test-support.js:2906:11
at process (http://localhost:7357/assets/test-support.js:2565:24)
Log: |
...
ok 10 Chrome 52.0 - Integration | Component | full calendar: set events to null removes events
ok 11 Chrome 52.0 - Integration | Component | full calendar: it removes events
ok 12 Chrome 52.0 - Integration | Component | full calendar: it adds events
ok 13 Chrome 52.0 - JSHint | integration/components/full-calendar-test.js: should pass jshint
ok 14 Chrome 52.0 - JSHint | resolver.js: should pass jshint
ok 15 Chrome 52.0 - JSHint | router.js: should pass jshint
ok 16 Chrome 52.0 - JSHint | test-helper.js: should pass jshint
1..16
Not all tests passed.
Is there any way to use FullCalendar's Google Calendar plugin with this component?
How do we set view specific options ?
I have tried few obvious approach but it does not effect the calendar anyway. Does the code has to be in specific place and is there any different approach to do the same?
I need something like this to be done:
Ember.$('.full-calendar').fullCalendar({
views: {
agendaWeek: {
titleFormat: 'MMMM d, y',
columnFormat: 'ddd D'
}
}
});
Although I can achieve few things with viewRender
callback. Checking the view.type
and setting options in view.options
. But unfortunately for above case the changes will reflect only in next subsequent render of the view, which is not doing me any good.
I have tried to get it initialized as above in all the component hooks to see if anything works, but had no luck with it. Am i missing something here?
The current ember-cli-fastboot
releases (1.0.0-rc.1 and above) introduce breaking changes. These will most likely break your current FastBoot implementation.
See ember-fastboot/ember-cli-fastboot#387 for more information and a guide on how to fix your addon. Also you may want to visit the -fastboot
Slack channel to get help from other users.
Note: this issue has been created automatically, by searching for certain patterns in your code. If you think this has been falsely created, feel free to close!
Hey guys, I'm very new in ember. May be my question is not that appropriate as it should be please pardon me.
My Questions is, is there any way to render events in a ember component, such that we can do extra action and customise the view.
Is there any way to do the same as ember-power-select dose for options.
I tried creating intense of my custom component. But its throwing error for the moment helper that I'm using to render the date.
I'm doing as follows, please guide me if somewhere i'm doing wrong
let owner = Ember.getOwner(this);
let componentLookupKey = `component:calendar/event-view`;
let layoutLookupKey = `template:components/calendar/event-view`;
let layout = owner.lookup(layoutLookupKey);
let component = owner.factoryFor(componentLookupKey);
const el = document.createElement('div');
let componentInstance = component.create({
layout,
});
componentInstance.set('targetObject', this)
componentInstance.appendTo(el);
and I'm getting this error
Compile Error moment-format is not a modifier: Helpers may not be used in the element form.
Thanks in advance.
I have a fresh Ember project and installed ember-fullcalendar
. Now I get this errors in the browser console when opening http://localhost:4200/
:
Uncaught ReferenceError: moment is not defined
at fullcalendar.js:15
at fullcalendar.js:17
(anonymous) @ fullcalendar.js:15
(anonymous) @ fullcalendar.js:17
loader.js:244 Uncaught Error: Could not find module `ember-resolver` imported from `lorem/resolver`
at missingModule (loader.js:244)
at findModule (loader.js:255)
at Module.findDeps (loader.js:165)
at findModule (loader.js:259)
at Module.findDeps (loader.js:165)
at findModule (loader.js:259)
at requireModule (loader.js:26)
at app-boot.js:2
This is how I setup the Ember project and installed ember-fullcalendar
:
➜ __temp node -v
v6.11.0
➜ __temp npm -v
5.0.3
➜ __temp ember -v
ember-cli: 2.13.2
node: 6.11.0
os: darwin x64
➜ __temp bower -v
1.8.0
➜ __temp ember new lorem
installing app
create .editorconfig
create .ember-cli
create .eslintrc.js
create .travis.yml
create .watchmanconfig
create README.md
create app/app.js
create app/components/.gitkeep
create app/controllers/.gitkeep
create app/helpers/.gitkeep
create app/index.html
create app/models/.gitkeep
create app/resolver.js
create app/router.js
create app/routes/.gitkeep
create app/styles/app.css
create app/templates/application.hbs
create app/templates/components/.gitkeep
create config/environment.js
create config/targets.js
create ember-cli-build.js
create .gitignore
create package.json
create public/crossdomain.xml
create public/robots.txt
create testem.js
create tests/.eslintrc.js
create tests/helpers/destroy-app.js
create tests/helpers/module-for-acceptance.js
create tests/helpers/resolver.js
create tests/helpers/start-app.js
create tests/index.html
create tests/integration/.gitkeep
create tests/test-helper.js
create tests/unit/.gitkeep
create vendor/.gitkeep
WARNING: Ember CLI is using the global NPM, but your NPM version has not yet been verified to work with the current Ember CLI release.
NPM: Installed dependencies
Successfully initialized git.
➜ __temp cd lorem
➜ lorem git:(master) ember server
Livereload server on http://localhost:49154
'instrument' is imported from external module 'ember-data/-debug' but never used
Build successful (13436ms) – Serving on http://localhost:4200/
Slowest Nodes (totalTime => 5% ) | Total (avg)
----------------------------------------------+---------------------
Babel (16) | 10381ms (648 ms)
Rollup (1) | 1048ms
cleaning up...
➜ lorem git:(master) ember install ember-fullcalendar
WARNING: Ember CLI is using the global NPM, but your NPM version has not yet been verified to work with the current Ember CLI release.
NPM: Installed ember-fullcalendar
Installed addon package.
➜ lorem git:(master) ✗ ember server
Livereload server on http://localhost:49154
'instrument' is imported from external module 'ember-data/-debug' but never used
Build successful (4856ms) – Serving on http://localhost:4200/
Slowest Nodes (totalTime => 5% ) | Total (avg)
----------------------------------------------+---------------------
Babel (19) | 1804ms (94 ms)
Rollup (1) | 1033ms
Concat (8) | 774ms (96 ms)
EslintValidationFilter (2) | 305ms (152 ms)
Is there something I miss or is this a bug in ember-fullcalendar
?
Hi,
I need to print full calendar including scrollable content but the css is not coming out proper. What is the appropriate way to do this?
I fiddled around with ember-fullcalendar
(in a fresh Ember project) and have a problem with one configuration setting documented here:
https://github.com/scoutforpets/ember-fullcalendar#opting-in
My ember-cli-build.js
looks like this:
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
emberFullCalendar: {
includeScheduler: true
}
});
return app.toTree();
};
Unfortunatelly this configuration setting does not seem work: the “Scheduler” is not imported.
I found the snippet in ember-fullcalendar
where this configuration setting is used (in node_modules/ember-fullcalendar/index.js
):
included: function(app, parentAddon) {
var target = parentAddon || app;
// allow addon to be nested - see: https://github.com/ember-cli/ember-cli/issues/3718
if (target.app) {
target = target.app;
}
var config = target.project.config(target.env) || {};
// Add scheduler to executable unless configured not to.
if (config.emberFullCalendar && config.emberFullCalendar.includeScheduler === true) {
this.includeScheduler = true;
} else {
this.includeScheduler = false;
}
this._super.included.apply(this, arguments);
}
If I replace this.includeScheduler = false;
with this.includeScheduler = true;
in the else
clause, the “Scheduler” gets imported and everything works like a charm.
config.emberFullCalendar
seems to be undefined
.
Is this a bug, an error in the documentation or did I make a mistake?
~ DELETED ~
The basic example shows how to create the array of events, but what if I want to bind the calendar with an event model?
On my route, I return as my model this.get('store').peekAll('event'); and when calling the full-calendar helper I set events=model but nothing happens. Maybe because my model isn't as an array of events.
The event model has the title, start and end attributes and I'm using ember 2.7. Thanks in advance!
When installing ember-fullcalendar
, npm warns: npm WARN deprecated [email protected]: This addon is not being maintained anymore, use at your own risk.
. Perhaps this addon should be replaced with something else.
The work in PR #9 was reverted. There is a lot of good work there, and I think the idea is sound -- to cause fullcalendar to mirror changes to events array without removing and re-adding all the events, with the performance and visual consequences.
The PR is closed because it was merged into branch upstream/miguelcobain-view-change
. That branch was abandoned.
In #9 there was discussion of the change breaking code which uses an events function. I think all that is needed is a few tests or a different attribute to distinguish from these two overloaded uses. events
can be:
So I guess the questions is whether there is interest in pushing @miguelcobain's code forward so that it would be compatible with the above.
Just wondering about the status of the library and if there are any plans on upgrading the full-calendar
version to 4.x?
I'm currently working on a project that needs to use the calendar component but I prefer using the version 4 of full calendar that doesn't use JQuery.
I noticed that @lan0 had forked the repo and upgraded to v4. Not sure if he has plans on opening a PR to this repo but I would be happy to help in upgrading full calendar to v4.2.0.
~ DELETED ~
Hey guys!
Nice addon, however it doesn't reflect on any option passed in.
I'm laying around with viewName being passed into a component. Ember: 2.5.0
This is a blocker :(
ember-fullcalendar 1.5.0
with ember-cli 2.12.0
New deprecation warning caused by 2.12.0 changes
DEPRECATION: Using "_lookupFactory" is deprecated. Please use container.factoryFor instead. [deprecation id: container-lookupFactory] See http://emberjs.com/deprecations/v2.x/#toc_migrating-from-_lookupfactory-to-factoryfor for more details.
at logDeprecationStackTrace (http://localhost:3000/2/assets/vendor.js:21854:19)
at HANDLERS.(anonymous function) (http://localhost:3000/2/assets/vendor.js:21965:7)
at raiseOnDeprecation (http://localhost:3000/2/assets/vendor.js:21884:12)
at HANDLERS.(anonymous function) (http://localhost:3000/2/assets/vendor.js:21965:7)
at invoke (http://localhost:3000/2/assets/vendor.js:21981:7)
at deprecate (http://localhost:3000/2/assets/vendor.js:21949:32)
at Object.deprecate (http://localhost:3000/2/assets/vendor.js:33791:37)
at Container.lookupFactory (http://localhost:3000/2/assets/vendor.js:17370:19)
at Class._lookupFactory (http://localhost:3000/2/assets/vendor.js:49064:33)
When I just did the quick change to use the container.factoryFor on https://github.com/scoutforpets/ember-fullcalendar/blob/master/addon/components/full-calendar.js#L24, I got the following error.
Error: You attempted to access "emberFullCalendar" on a factory manager created by container#factoryFor. "emberFullCalendar" is not a member of a factory manager."
at Object.get (vendor.js:17430)
at Class.<anonymous> (vendor.js:130034)
at ComputedPropertyPrototype.get (vendor.js:33431)
at Object.get (vendor.js:38424)
at Class.get (vendor.js:51162)
at Class.didInsertElement (vendor.js:130130)
at Class.trigger (vendor.js:58863)
at Class.superWrapper [as trigger] (vendor.js:56914)
at CurlyComponentManager.didCreate (vendor.js:29083)
at Environment.commit (vendor.js:67533)
defaultDispatch @ vendor.js:34050
Trying to pass the date
as moment('2017-11-22', 'YYYY-MM-DD')
, moment('2017-11-22')
or just '2017-11-22
for example, doesn't work, it always setup the today date as highlighted date.
Also changing the passed variable to a new date after an eventClick also doesn't change the highlighted day.
Is it a bug indeed, or am I passing a wrong format?
Code example:
{{full-calendar
date=model.data.date
events=model.data.events
eventClick=(action model.actions.eventClick)
eventAfterAllRender=(action model.actions.eventAfterAllRender)
}}
Where model.data.date
is the dates I mentioned before
Or isn't it suppose to highlight the passed date in the calendar, just the today date?
Are you planing on doing something for the deprecated warning?
Should not be much of a problem to fix.
Hi, i try to change the default locale to 'es' by using this sentence (docs here https://fullcalendar.io/docs/text/locale/):
Ember.$('.full-calendar').fullCalendar({locale: 'es'});
But i see ember-fullcalendar don't include the locale-all.js
file (https://github.com/scoutforpets/ember-fullcalendar/blob/master/index.js#L16), then i try to add this file in my local copy of the project, but i see another error:
Any advice?
Specifying static version of ember-cli-moment-shim creates conflicts in the apps using other versions.
dependency shouldn't be specified as "3.5.0", it should be "^3.5.0" instead.
Hey guys,
It says that moment is not required for using with this addon, but I just installed this addon in a fresh app and I get the following error:
So, perhaps it is required and the mention in the readme should be modified?
I'm also trying to figure out what the problem with the resolver is, not sure at the moment.
I have a brand new ember 2.8.0 project which has "ember-resolver": "^2.0.3"
Cheers,
Alex
~ DELETED ~
Installation is fine however cannot load project as there is a error:
fullcalendar.js:1330 Uncaught TypeError: Cannot read property 'extend' of undefined
at Object. (fullcalendar.js:1330)
at webpack_require (fullcalendar.js:36)
at Object. (fullcalendar.js:4821)
at webpack_require (fullcalendar.js:36)
at Object. (fullcalendar.js:2046)
at webpack_require (fullcalendar.js:36)
at Object. (fullcalendar.js:14374)
at webpack_require (fullcalendar.js:36)
at fullcalendar.js:79
at fullcalendar.js:82
Inspecting the lines of code in fullcalendar.js, it seems like webpack_require(3) is missing. Any ideas how to resolve the issue would be appreciated.
Object.defineProperty(exports, "__esModule", { value: true });
var moment = __webpack_require__(0);
var $ = __webpack_require__(3);
var util_1 = __webpack_require__(4);
var ambigDateOfMonthRegex = /^\s*\d{4}-\d\d$/;
var ambigTimeOrZoneRegex = /^\s*\d{4}-(?:(\d\d-\d\d)|(W\d\d$)|(W\d\d-\d)|(\d\d\d))((T| )(\d\d(:\d\d(:\d\d(\.\d+)?)?)?)?)?$/;
var newMomentProto = moment.fn; // where we will attach our new methods
exports.newMomentProto = newMomentProto;
var oldMomentProto = $.extend({}, newMomentProto); // copy of original moment methods
exports.oldMomentProto = oldMomentProto;
Could not build the ember app for production with npm run build
with ember-fullcalendar installed.
Here is the log:
`=================================================================================
ENV Summary:
TIME: Tue Jan 11 2022 12:00:20 GMT+1030 (Australian Central Daylight Time)
TITLE: ember
ARGV:
ERROR Summary:
=================================================================================
`
Originally reported at full-calendar issues.
Two methods supported by FC are eventRender and eventAfterRender.
Surprisingly in ember-fullcalendar
the eventRender callback is executed after all events have been placed in the DOM, as opposed to the ideal behavior on FC documentation.
and here is ember twiddle for the same using ember-fullcalendar.
Now try editing events in both examples and see how ember version is not working as expected.
@jamesdixon Could you see for this sometime soon?
after ember install ember-fullcalendar
I am getting
Installed packages for tooling via npm.
/home/me/projects/x/node_modules/ember-fullcalendar/blueprints/ember-fullcalendar/index.js:5
return this.addBowerPackageToProject('fullcalendar', '^2.7.3').then(() => {
^
Unexpected token )
Looks like arrow functions are not supported.
https://github.com/scoutforpets/ember-fullcalendar/blob/master/blueprints/ember-fullcalendar/index.js#L5
Hey there! This is an awesome lib!
Just writing a note that your releases section doesn't match the npm ones. So i was a bit confused for a minute.
Thanks again!
Hello,
I tried to declare some events, using the eventSources parameter, but nothing is displayed.
I took a look at the code and it seems that eventSources is taken into account, but no observer is attached to it. Could this be related ?
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.