当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

AngularJS-ResponsiveCalendar

A pure AngularJS responsive calendar directive
授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 郑正文
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ui-rCalendar directive

A pure AngularJS responsive calendar directive

You could also check https://github.com/twinssbc/Angular-Customizable-Calendar for the Angular version.
If you want to only use it in Ionic framework, please check https://github.com/twinssbc/Ionic2-Calendar for the Ionic specific version

Demo

http://twinssbc.github.io/AngularJS-ResponsiveCalendar/demo/

Usage

Bower Install: bower install ng-responsive-calendar

Load the necessary dependent files:

<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="<bower lib installation path>/ng-responsive-calendar/dist/css/calendar.min.css"/>
<script src="../lib/angular/angular.js"></script>
<script src="<bower lib installation path>/ng-responsive-calendar/dist/js/calendar-tpls.min.js"></script>

Add the calendar module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.rCalendar'])

Add the directive in the html page

<calendar calendar-mode="mode" event-source="eventSource">

Options

  • formatDay
    The format of the date displayed in the month view.
    Default value: 'dd'

  • formatDayHeader
    The format of the header displayed in the month view.
    Default value: 'EEE'

  • formatDayTitle
    The format of the title displayed in the month view.
    Default value: 'MMMM dd, yyyy'

  • formatWeekTitle
    The format of the title displayed in the week view.
    Default value: 'MMMM yyyy, Week w'

  • formatMonthTitle
    The format of the title displayed in the month view.
    Default value: 'MMMM yyyy'

  • formatWeekViewHeader
    The format of the header displayed in the week view.
    Default value: 'EEE d'

  • formatHourColumn
    The format of the hour column displayed in the week and day view.
    Default value: 'ha'

  • calendarMode
    The initial mode of the calendar.
    Default value: 'month'

  • showWeeks
    If set to true, a week number column will be displayed in the month view.
    Default value: false

  • showEventDetail
    If set to true, when selecting the date in the month view, the events happened on that day will be shown below.
    Default value: true

  • startingDay
    Control month view starting from which day.
    Default value: 0

  • allDayLabel
    The text displayed in the allDay column header.
    Default value: 'all day'

  • noEventsLabel
    The text displayed when there’s no event on the selected date in month view.
    Default value: 'No Events'

  • eventSource
    The data source of the calendar, when the eventSource is set, the view will be updated accordingly.
    Default value: null
    The format of the eventSource is described in the EventSource section

  • queryMode
    If queryMode is set to 'local', when the range or mode is changed, the calendar will use the already bound eventSource to update the view
    If queryMode is set to 'remote', when the range or mode is changed, the calendar will trigger a callback function rangeChanged.
    Users will need to implement their custom loading data logic in this function, and fill it into the eventSource. The eventSource is watched, so the view will be updated once the eventSource is changed.
    Default value: 'local'

  • step
    It can be set to 15 or 30, so that the event can be displayed at more accurate position in weekview or dayview.

  • rangeChanged
    The callback function triggered when the range or mode is changed if the queryMode is set to 'remote'

      $scope.rangeChanged = function (startTime, endTime) {
          Events.query({startTime: startTime, endTime: endTime}, function(events){
              $scope.eventSource=events;
          });
      };
    
  • eventSelected
    The callback function triggered when an event is clicked

      <calendar ... event-selected="onEventSelected(event)"></calendar>
    
    
      $scope.onEventSelected = function (event) {
          console.log(event.title);
      };
    
  • timeSelected
    The callback function triggered when a date or time is selected

      <calendar ... time-selected="onTimeSelected(selectedTime, events)"></calendar>
      
      $scope.onTimeSelected = function (selectedTime, events) {
      	console.log('Selected time: ' + selectedTime + ' hasEvents: ' + (events !== undefined && events.length !== 0));
      };
    

EventSource

EventSource is an array of event object which contains at least below fields:

  • title

  • startTime
    If allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.
    For example, if an allDay event starting from 2014-05-09, then startTime is

      var startTime = new Date(Date.UTC(2014, 4, 8));
    
  • endTime
    If allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.
    For example, if an allDay event ending to 2014-05-10, then endTime is

      var endTime = new Date(Date.UTC(2014, 4, 9));
    
  • allDay
    Indicates the event is allDay event or regular event

NoteIn the current version, the calendar controller only watches for the eventSource reference as it's the least expensive.That means only you manually reassign the eventSource value, the controller get notified, and this is usually fit to the scenario when the range is changed, you load a new data set from the backend.In case you want to manually insert/remove/update the element in the eventSource array, you can call broadcast the 'eventSourceChanged' event to notify the controller manually.

Events

  • changeDateWhen receiving this event, the calendar will move the current view to previous or next range.
    Parameter: direction
    1 - Forward
    -1 - Backward

      $scope.$broadcast('changeDate', 1);
    
  • eventSourceChangedThis event is only needed when you manually modify the element in the eventSource array.
    Parameter: value
    The whole event source object

      $scope.$broadcast('eventSourceChanged',$scope.eventSource);
    
 相关资料
  • angular是什么? AngularJS 最初由Misko Hevery 和Adam Abrons于2009年开发,后来成为了Google公司的项目。AngularJS弥补了HTML在构建应用方面的不足,其通过使用标识符(directives)结构,来扩展Web应用中的HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易。 安装angular bower

  • 更改历史 * 2018-1-27 高天阳 整理文档 补充$log * 2018-1-23 武超敏 增加$q内容 * 2017-9-17 张飞 添加参考链接 * 2017-6-1 杨丽 初始化文档 1 历史、现状和发展 1.1 历史 AngularJS最初由Misko Hevery和Adam Abrons于2009年开发,后来成为了Goog

  • Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,兼容主流浏览器,与 jQuery 配合良好。 数据绑定可能是 AngularJS 最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的

  • 本文向大家介绍AngularJS ngCloak,包括了AngularJS ngCloak的使用技巧和注意事项,需要的朋友参考一下 示例 该ngCloak指令用于防止在加载应用程序时浏览器以原始(未编译)形式简短地显示Angular html模板。-查看源 的HTML ngCloak 可以应用于body元素,但是首选用法是将多个ngCloak指令应用于页面的一小部分,以允许逐步呈现浏览器视图。 该

  • 主要内容:Bootstrap,HTML 代码,指令解析,Bootstrap 类解析,JavaScript 代码,myUsers.js,JavaScript 代码解析AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。 查看 Bootstrap教程。 Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link re

  • 主要内容:AngularJS 全局 API,实例,实例,实例,实例API 意为 Application Programming Interface(应用程序编程接口)。 AngularJS 全局 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访问。 以下列出了一些通用的 API 函数: API 描述 angular.lowercas

  • 主要内容:使用 PHP 从 MySQL 中获取数据,AngularJS 实例,ASP.NET 中执行 SQL 获取数据,AngularJS 实例,服务端代码,跨域 HTTP 请求,1. PHP 和 MySql 代码实例,2. PHP 和 MS Access 代码实例,3. ASP.NET VB 和 MS Access 代码实例,4. ASP.NET VB Razor 和 SQL Lite 代码实例在前面章节中的代码也可以用于读取数据库中的数据。 使用 PHP 从 MySQL 中获取数据 Angu

  • 主要内容:使用 ng-options 创建选择框,ng-options 与 ng-repeat,应该用哪个更好?,数据源为对象AngularJS 可以使用数组或对象创建一个下拉列表选项。 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedN