Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@synconset/angular-ui-calendar
Advanced tools
Readme
A complete AngularJS directive for the Arshaw FullCalendar.
Using bower run:
bower install --save angular-ui-calendar
Alternatively you can add it to your bower.json
like this:
dependencies: {
"angular-ui-calendar": "latest"
}
And then run
bower install
This will copy the ui-calendar files into your components
folder, along with its dependencies. Load the script and style files in your application:
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>
<!-- jquery, moment, and angular have to get included before fullcalendar -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/gcal.js"></script>
Add the calendar module as a dependency to your application module:
var app = angular.module('App', ['ui.calendar'])
Apply the directive to your div elements. The calendar must be supplied an array of documented event sources to render itself:
<div ui-calendar ng-model="eventSources"></div>
Define your model in a scope e.g.
$scope.eventSources = [];
All the Arshaw Fullcalendar options can be passed through the directive. This even means function objects that are declared on the scope.
myAppModule.controller('MyController', function($scope) {
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'month basicWeek basicDay agendaWeek agendaDay',
center: 'title',
right: 'today prev,next'
},
eventClick: $scope.alertEventOnClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize
}
};
});
<div ui-calendar="uiConfig.calendar" ng-model="eventSources">
The ui-calendar directive plays nicely with ng-model.
An Event Sources object needs to be created to pass into ng-model. This object's values will be watched for changes. If a change occurs, then that specific calendar will call the appropriate fullCalendar method.
The ui-calendar directive expects the eventSources object to be any type allowed in the documentation for the fullcalendar. docs Note that all calendar options which are functions that are passed into the calendar are wrapped in an apply automatically.
It is possible to access a specific calendar object by declaring a name for it on the uiCalendar directive. In this next line we are naming the calendar 'myCalendar'. This will be attached to the uiCalendarConfig constant object, that can be accessed via DI.
<div ui-calendar="calendarOptions" ng-model="eventSources" calendar="myCalendar">
Now the calendar object is available in uiCalendarConfig.calendars:
uiCalendarConfig.calendars.myCalendar
This allows you to declare any number of calendar objects with distinct names.
You can use fullcalendar's eventRender
option to customize how events are rendered in the calendar.
However, only certain event attributes are watched for changes (they are id
, title
, url
, start
, end
, allDay
, and className
).
If you need to automatically re-render other event data, you can use calendar-watch-event
.
calendar-watch-event
expression must return a function that is passed event
as argument and returns a string or a number, for example:
$scope.extraEventSignature = function(event) {
returns "" + event.price;
}
<ui-calendar calendar-watch-event="extraEventSignature(event)" ... >
// will now watch for price
When adding new events to the calendar they can disappear when switching months. To solve this add stick: true
to the event object being added to the scope.
There is no mechanism to $watch the displayed date range on the calendar due to the JQuery nature of fullCalendar. If you want to track the dates displayed on the calendar so you can fetch events outside the scope of fullCalendar (Say from a caching store in a service, instead of letting fullCalendar pull them via AJAX), you can add the viewRender callback to the calendar config.
$scope.calendarConfig = {
calendar:{
height: "100%",
...
viewRender: function(view, element) {
$log.debug("View Changed: ", view.visStart, view.visEnd, view.start, view.end);
}
}
};
grunt minify
grunt serve
The calendar works alongside of all the documentation represented here
Make sure that if a new feature is added, that the proper tests are created.
We use karma and grunt to ensure the quality of the code.
npm install -g grunt-cli
npm install
bower install
grunt
FAQs
A complete AngularJS directive for the Arshaw FullCalendar.
The npm package @synconset/angular-ui-calendar receives a total of 6 weekly downloads. As such, @synconset/angular-ui-calendar popularity was classified as not popular.
We found that @synconset/angular-ui-calendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.