• This repository has been archived on 19/Jun/2018
  • Stars
    star
    798
  • Rank 57,078 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated almost 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A port of the bootstrap calendar widget to AngularJS (no jQuery required!)

Angular Bootstrap Calendar

project unmaintained Gitter Build Status codecov Bower version npm version devDependency Status GitHub issues GitHub stars GitHub license

Like what you see here? Hire me! πŸ‘¨β€πŸ’»

🚨🚨🚨 Project status 🚨🚨🚨

Due to the growing popularity of angular 2 and beyond, this project is considered feature complete and no further work will be done on it. All dev time is now being devoted to the projects successor angular-calendar. However, you are welcome to fork and modify this repo as you please.

Table of contents

Demo

https://mattlewis92.github.io/angular-bootstrap-calendar/

About

This plugin is an AngularJS port of the original jQuery bootstrap calendar that can be found here: http://bootstrap-calendar.azurewebsites.net/

The layout and functionality is intended to be exactly the same, but without the overhead of including jQuery just for a calendar.

All credits for the UI/UX and the less files of the calendar go to the original author.

Pull requests are welcome.

Looking for an angular 2.0+ version of this library? Check this out: https://github.com/mattlewis92/angular-calendar

Installation

The calendar has a few dependencies, these are as follows, and must be included before this libraries files:

Optional dependencies:

  • ui-bootstrap (0.14.0+, optional, include for collapse animations and tooltips.
  • interactjs (optional, include to allow drag and drop on the calendar)
  • ngTouch (optional, include if using the calendar on mobile devices. You will also need to enable $touchProvider.ngClickOverrideEnabled(true) on angular 1.5.0+)

You can install through bower:

bower install --save angular-bootstrap-calendar

You will then need to include the JS and CSS files for the plugin:

<link href="bower_components/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<script src="bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>

And finally add the module dependency in your AngularJS app (you can remove ui.bootstrap if you don't want the extra dependency - it is only required for collapse animations and tooltips):

angular.module('myApp', ['mwl.calendar', 'ui.bootstrap']);

Alternatively you can install through npm:

npm install --save angular-bootstrap-calendar

Or if using npm 3+ where peer dependencies aren't automatically installed:

npm install --save angular-bootstrap-calendar angular bootstrap moment angular-ui-bootstrap

Then add as a dependency to your app:

angular.module('myApp', [require('angular-bootstrap-calendar'), require('angular-ui-bootstrap')]);

Documentation

There is a single directive exposed to create the calendar, use it like so:

<mwl-calendar
    view="calendarView"
    view-date="viewDate"
    events="events"
    view-title="calendarTitle"
    on-event-click="eventClicked(calendarEvent)"
    on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
    cell-is-open="true">
</mwl-calendar>

An explanation of the properties is as follows:

view (required attribute)

This variable is a string that can be either year, month, week or day. Changing it will change the view of the calendar.

For the calendar to display this variable needs to be set like so:

$scope.calendarView = 'month';

view-date (required attribute)

This variable holds the current date the calendar is centralised on. Each view will decide on its current year / month / week / day depending on the value of this variable.

events (required attribute)

An array of events to display on the calendar. For example:

$scope.events = [
  {
    title: 'My event title', // The title of the event
    startsAt: new Date(2013,5,1,1), // A javascript date object for when the event starts
    endsAt: new Date(2014,8,26,15), // Optional - a javascript date object for when the event ends
    color: { // can also be calendarConfig.colorTypes.warning for shortcuts to the deprecated event types
      primary: '#e3bc08', // the primary event color (should be darker than secondary)
      secondary: '#fdf1ba' // the secondary event color (should be lighter than primary)
    },
    actions: [{ // an array of actions that will be displayed next to the event title
      label: '<i class=\'glyphicon glyphicon-pencil\'></i>', // the label of the action
      cssClass: 'edit-action', // a CSS class that will be added to the action element so you can implement custom styling
      onClick: function(args) { // the action that occurs when it is clicked. The first argument will be an object containing the parent event
        console.log('Edit event', args.calendarEvent);
      }
    }],
    draggable: true, //Allow an event to be dragged and dropped
    resizable: true, //Allow an event to be resizable
    incrementsBadgeTotal: true, //If set to false then will not count towards the badge total amount on the month and year view
    recursOn: 'year', // If set the event will recur on the given period. Valid values are year or month
    cssClass: 'a-css-class-name', //A CSS class (or more, just separate with spaces) that will be added to the event when it is displayed on each view. Useful for marking an event as selected / active etc
    allDay: false // set to true to display the event as an all day event on the day view
  }
];

title, color and startsAt are required for all events.

view-title

This variable will be assigned to the calendar title. If you want to change the formatting you can use the calendarConfig or just override the appropriate method in the calendarTitle factory.

on-event-click

This expression is called when an event is clicked on the calendar. calendarEvent can be used in the expression and contains the calendar event that was clicked on.

on-event-times-changed

This expression is called when an event is dragged and dropped or resized into a different date / time on the calendar. The available values that are passed to the expression are: calendarEvent, calendarNewEventStart, calendarNewEventEnd and calendarDraggedFromDate (month view only). The directive won't change the event object and leaves that up to you to implement. Please note drag and drop is only available by including the interactjs library.

on-timespan-click

This expression is called when a month, day or hour on the calendar is clicked on the year, month and day views respectively. calendarDate can be used in the expression and contains the start of the month, day or hour that was clicked on. If on the month or year view calendarCell will contain cell data for the clicked day or month which you can then modify.

on-date-range-select

This expression is called when a range of hours selected on the day view respectively. calendarRangeStartDate can be used in the expression and contains the start of the range, calendarRangeEndDate can be used in the expression and contains the end of the range.

cell-is-open

A 2 way bound variable that when set to true will open the year or month view cell that corresponds to the date passed to the date object passed to view-date.

day-view-start

An interpolated string in the form of hh:mm to start the day view at, e.g. setting it to 06:00 will start the day view at 6am. Any minutes must be divisible by the day-view-split value.

day-view-end

An interpolated string in the form of hh:mm to end the day view at, e.g. setting it to 22:59 will end the day view at 11pm.

day-view-split

The number of chunks to split the day view hours up into. Can be either 10, 15 or 30. Default: 30

day-view-event-chunk-size

The number of pixels to "snap" event drag and resizes to. Default: 30

day-view-segment-size

The size of each hour segment in the day view in pixels. A custom css class is also required to set the height with the same value. See the example for details. Default: 30

day-view-event-width

The width of day view events. Default: 150

on-view-change-click

An optional expression that is evaluated when the view is changed by clicking on a date. Return false from the expression function to disable the view change. calendarDate can be used in the expression and contains the date that was selected. calendarNextView is the view that the calendar will be changed to.

cell-modifier

An optional expression that is evaluated on each cell generated for the year, month and day views. calendarCell can be used in the expression and is an object containing the current cell data which you can modify (see the calendarHelper service source code or just console.log it to see what data is available). If you add the cssClass property it will be applied to the cell.

cell-auto-open-disabled

If set it true it will disable the auto opening and closing of the slidebox on the month and year views

custom-template-urls

An object where the key is the template name to override and the value is a path to a custom template for that calendar instance. If not set it will fallback to the value of calendarConfig.templates.

For example, to change the month view template on just one instance of the month view:

// in your controller
$templateCache.put('my-custom-template.html', 'Custom month view template here');

// in your template
<mwl-calendar custom-template-urls="{calendarMonthView: 'my-custom-template.html'}"></mwl-calendar>

template-scope

An object containing a set of variables that will be available in a custom template as vm.templateScope

draggable-auto-scroll

Passed to the autoScroll option of interactjs. Unlike interact this defaults to true if not set.

Configuring the calendar default config

You can easily customise the date formats and i18n strings used throughout the calendar by using the calendarConfig value. Please note that these example formats are those used by moment.js and these won't work if using angular as the date formatter. Example usage:

angular.module('myModule')
  .config(['calendarConfig', function(calendarConfig) {

    // View all available config
    console.log(calendarConfig);

    // Change the month view template globally to a custom template
    calendarConfig.templates.calendarMonthView = 'path/to/custom/template.html'; 

    // Use either moment or angular to format dates on the calendar. Default angular. Setting this will override any date formats you have already set.
    calendarConfig.dateFormatter = 'moment';

    // This will configure times on the day view to display in 24 hour format rather than the default of 12 hour
    calendarConfig.allDateFormats.moment.date.hour = 'HH:mm';

    // This will configure the day view title to be shorter
    calendarConfig.allDateFormats.moment.title.day = 'ddd D MMM';

    // This will set the week number hover label on the month view
    calendarConfig.i18nStrings.weekNumber = 'Week {week}';

    // This will display all events on a month view even if they're not in the current month. Default false.
    calendarConfig.displayAllMonthEvents = true;

    // Make the week view more like the day view, ***with the caveat that event end times are ignored***.
    calendarConfig.showTimesOnWeekView = true;

  }]);

Custom directive templates

All calendar template urls can be changed using the calendarConfig as illustrated above.

Please note that even patch releases may change templates which could break your app, so if using a custom template it is recommended that you pin the version of this module and review all changes when updating the version.

The mwl-date-modifier directive

There is also a helper directive that you can use for the next, today and previous buttons. Use it like so:

<button
  class="btn btn-primary"
  mwl-date-modifier
  date="viewDate"
  decrement="calendarView">
  Previous
</button>

<button
  class="btn btn-default"
  mwl-date-modifier
  date="viewDate"
  set-to-today>
  Today
</button>

<button
  class="btn btn-primary"
  mwl-date-modifier
  date="viewDate"
  increment="calendarView">
  Next
</button>

Internationalization and localization

You can either use angular's date filter or moment.js to format dates. The default is to use angular. You can change the formatter to be moment like so:

angular.module('myModule')
  .config(['calendarConfig', function(calendarConfig) {

    calendarConfig.dateFormatter = 'moment'; // use moment to format dates

  }]);

Then you just need to include the appropriate locale files for your app.

If you want to dynamically change the locale for angular and not include all of the available angular locale files try this library.

Otherwise if using moment you can call moment.locale('YOUR_LOCALE_STRING') to change the locale and the calendar will auto update.

To set Monday as the first day of the week, configure it in moment like so (even if using angular for formatting dates):

moment.locale('en_gb', {
  week : {
    dow : 1 // Monday is the first day of the week
  }
});

For a full list of all available formats and their defaults see calendarConfig.js

Hiding the calendar

When hiding the calendar it is recommended to use ng-if instead of ng-show/hide otherwise drag, drop, resize and date range selection will not work properly.

Development

Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + run tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests (this is automatic when you run npm start).

Build

Run npm run build to build the project files in the dist folder

License

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

angular-calendar

A flexible calendar component for angular 15.0+ that can display events on a month, week or day view.
TypeScript
2,720
star
2

angular-resizable-element

An angular 15.0+ directive that allows an element to be dragged and resized
TypeScript
314
star
3

webpack-retry-chunk-load-plugin

A webpack plugin to retry loading of chunks that failed to load
TypeScript
236
star
4

angular-confirmation-popover

An angular 15.0+ bootstrap confirmation popover
TypeScript
202
star
5

karma-coverage-istanbul-reporter

A karma reporter that uses the latest istanbul 1.x APIs to report coverage
JavaScript
163
star
6

angular-draggable-droppable

Observable powered drag and drop for angular 15.0+
TypeScript
134
star
7

angular2-tv-tracker

A simple TV app for learning angular 2+
TypeScript
127
star
8

angularx-flatpickr

An angular 17.0+ wrapper for flatpickr
TypeScript
88
star
9

angular-bootstrap-confirm

Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!)
JavaScript
88
star
10

angular-gauge

A tiny angular 15.0+ wrapper for https://github.com/naikus/svg-gauge
TypeScript
80
star
11

angular-bluebird-promises

Replace the default angular $q service with the bluebird promise library for enhanced promises within your angular app!
JavaScript
74
star
12

generator-angular-library

A yeoman generator for scaffolding a new angular 5 module that you can publish and share straight away to npm
TypeScript
65
star
13

angular-text-input-highlight

A component that can highlight parts of text in a textarea. Useful for displaying mentions etc
TypeScript
55
star
14

angular-text-input-autocomplete

A angular 6+ directive for adding autocomplete functionality to text input elements, built around composability
TypeScript
45
star
15

calendar-utils

Utility functions to generate views for calendars
TypeScript
38
star
16

webpack-filter-warnings-plugin

Allows you to hide certain warnings from webpack compilations
TypeScript
27
star
17

cordova-plugin-is-debug

A cordova plugin to detect if the app is running in debug mode or not
Java
20
star
18

angular-async-cache

A simple utility to help with caching of promises and observables to enable an easy offline first approach in angular 6+ apps
TypeScript
20
star
19

angular-highlight-js

Highlight.js integration for angular 4.0+
TypeScript
9
star
20

js-to-typescript-codemod

A simple codemod for helping migrate from babel to typescript. Converts default imports to wildcards.
JavaScript
8
star
21

positioning

The ng-bootstrap Positioning class as a standalone module
TypeScript
4
star
22

bless-css-webpack-plugin

A webpack plugin for bless CSS
JavaScript
4
star
23

webpack-angular-externals

A tiny utility to prevent webpack bundling @angular dependencies in your library code
JavaScript
3
star
24

create-plunker

A helper utility to create plunkers
TypeScript
2
star
25

material-theme-test

1
star
26

docker-nodejs-chrome

A docker container for installing node.js and google chrome
1
star
27

mattlewis.me

The source code for my personal website
HTML
1
star
28

node-mr-bump

Bumps your apps manifest files version
JavaScript
1
star
29

mwl-technologies.co.uk

TypeScript
1
star
30

angular-15-angular-calendar

TypeScript
1
star
31

tslint-config-mwl

The TSLint config that I use across all projects. Should be used in conjunction with angular + prettier
1
star
32

angular-calendar-ng16-test

HTML
1
star
33

webpack-date-fns-externals

A tiny utility to prevent webpack bundling date-fns imports in your library code
JavaScript
1
star
34

angular-async-tracker

A port of angular-promise-tracker to angular 6+ that also supports observables
TypeScript
1
star
35

api.mattlewis.me

A very simple REST API used by my personal website. Uses native ES6 and a couple of babel transforms for unsupported native features.
JavaScript
1
star
36

generate-date-fns-typings

A script to auto create typescript definitions for the date-fns library from the docblock comments
JavaScript
1
star