angular bootstrap calendar

angular bootstrap calendar

就像你在这里看到的吗？雇我！ ?‍

项目状态

由于Angular 2及以后的越来越受欢迎，该项目被认为是完整的，并且将无需进行进一步的工作。现在，所有开发时间都致力于项目继任者angular-calendar 。但是，欢迎您访问叉子，并随意修改此仓库。

目录

• 演示
• 关于
• 安装
• 文档
• 发展
• 执照

演示

https://mattlewis92.*githu**b.io/angular-bootstrap-calendar/

关于

该插件是原始jQuery Bootstrap日历的AngularJS端口，可以在此处找到：http：//bootstrap-calendar.azurewebsites.net/

布局和功能的目的是完全相同，但不包括日历的jQuery的开销。

UI/UX的所有信用和日历的较少文件都归原始作者。

欢迎拉动请求。

寻找此库的Angular 2.0+版本？检查一下：https：//github.com/mattlewis92/angular-calendar

安装

日历具有一些依赖项，这些依赖项如下，必须在此库文件之前包含：

• 支持Angularjs 1.3.x，1.4.x，1.5.x和1.6.x
• Bootstrap 3+（仅CSS）
• 时刻

可选依赖性：

• UI-Bootstrap（0.14.0+，可选，包括用于折叠动画和工具提示。
• Interactjs（可选，包括允许在日历上拖放）
• ngtouch $touchProvider.ngClickOverrideEnabled(true)可选，如果在移动设备上使用日历。

您可以通过Bower安装：

 bower install --save angular-bootstrap-calendar

然后，您需要在插件中包含JS和CSS文件：

 <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>

最后，在AngularJS应用中添加模块依赖项（如果您不想要额外的依赖性，则可以删除UI.bootstrap-仅对于折叠动画和工具提示是必需的）：

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

或者，您可以通过NPM安装：

 npm install --save angular-bootstrap-calendar

或者，如果使用NPM 3+，则未自动安装同伴依赖项：

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

然后添加为您的应用程序的依赖性：

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

文档

有一个暴露于创建日历的指令，请这样使用：

 < 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 >

对属性的解释如下：

查看（必需属性）

该变量是一条字符串，可以是year ， month ， week或day 。更改它将改变日历的视图。

为了使日历显示此变量，需要这样的设置：

 $scope . calendarView = \'month\' ;

查看日期（必需属性）

该变量保留了日历集中的当前日期。根据此变量的价值，每个视图将决定其当前年 /月 /每周 /日。

事件（必需属性）

在日历上显示的一系列事件。例如：

 $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和startsAt 。

查看标题

此变量将分配给日历标题。如果要更改格式，则可以使用calendarConfig或在calendarTitle工厂中覆盖适当的方法。

单击

当在日历上单击事件时，该表达式被调用。 calendarEvent可以在表达式中使用，并包含单击的日历事件。

发生事件时期变化

当事件被拖动并删除或调整到日历上的其他日期 /时间时，该表达式是调用的。传递给该表达式的可用值是： calendarEvent ， calendarNewEventStart ， calendarNewEventEnd和calendarDraggedFromDate （仅一个月视图）。该指令不会更改事件对象，并将其保留给您以实现。请注意，仅包括InteractJS库，才能使用拖放。

在Timespan上单击

当日历上的一个月，每日或小时分别单击年度，月和日的视图时，该表达式被称为。 calendarDate可以在表达式中使用，并包含单击的一个月，每日或小时的开始。如果在一个月或年度查看calendarCell中将包含点击日期或月份的单元数据，则可以修改。

享年范围选择

当分别在白天视图中选择的小时范围时，称为此表达式。 calendarRangeStartDate可以在表达式中使用，并包含范围的开始， calendarRangeEndDate可以在表达式中使用，并包含范围的末端。

细胞IS开幕

设置为true的2条绑定变量将打开年度或月视图单元格，该变量对应于传递的日期对象传递给view-date 。

日间启动

以HH：mm形式的插值字符串以启动一天的视图，例如将其设置为06:00，将在凌晨6点开始播放日期视图。任何分钟都必须由day-view-split值除外。

日间末端

以HH：mm形式的插值字符串结束一天的视图，例如将其设置为22:59，将在晚上11点结束一天的视图。

日间视图

将白天的块数量分为几个小时。可以是10、15或30。默认值：30

Day-View-Event-Chunk大小

“快照”事件拖动并调整大小的像素的数量。默认值：30

日视节段尺寸

每天的小时段的大小以像素为单位。还需要自定义CSS类以设置具有相同值的高度。有关详细信息，请参见示例。默认值：30

日间视野宽度

日间观看活动的宽度。默认值：150

视线切换单击

通过单击日期更改视图时评估的可选表达式。从表达式函数返回false以禁用视图更改。 calendarDate可以在表达式中使用，并包含所选择的日期。 calendarNextView是将日历更改为的视图。

细胞模型

可选的表达式，该表达式在年度，月和日期观看的每个单元中进行评估。 calendarCell可以在表达式中使用，并且是一个包含您可以修改的当前单元格数据的对象（请参阅“ calendarHelper Service源代码”或“ console.log”以查看可用的数据）。如果添加cssClass属性，它将应用于单元格。

单元自动开放式拆分

如果设置为真，它将禁用月份和年份的自动打开和关闭幻灯箱

定制 – 板块urls

键是覆盖模板名称的对象，该值是该日历实例的自定义模板的路径。如果未设置，它将退回到calendarConfig.templates的值。

例如，要更改“月份”模板，仅在一个月的一个实例上查看：

 // 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>

模板镜

一个包含一组变量的对象，该变量将在自定义模板中作为vm.templateScope

可拖动的自动滚动

传递给InteractJS的自动滚动选项。与互动不同，此默认值为true ，如果不设置。

配置日历默认配置

您可以通过使用calendarConfig值轻松自定义整个日历中使用的日期格式和I18N字符串。请注意，这些示例格式是瞬间使用的格式，如果使用Angular作为日期格式，则这些格式将无法使用。示例用法：

 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 ;

  } ] ) ; 

自定义指令模板

所有日历模板URL都可以使用上面说明的calendarConfig更改。

请注意，即使是补丁发布也可能会更改可能破坏您的应用程序的模板，因此，如果使用自定义模板，建议您固定此模块的版本，并在更新版本时查看所有更改。

MWL日期模型指令

还有一个辅助指令，您可以用于下一个，今天和以前的按钮。像这样使用：

 < 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 > 

国际化和本地化

您可以使用Angular的日期过滤器，也可以使用Moment.js格式日期。默认值是使用角。您可以将格式化器更改为这样的时刻：

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

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

  } ] ) ;

然后，您只需要为应用程序包含适当的语言环境文件即可。

如果您想动态更改Angular的语言环境，并且不包含所有可用的Angular LocaLE文件，请尝试此库。

否则，如果使用力矩可以调用moment.locale(\'YOUR_LOCALE_STRING\')更改语言环境，日历将自动更新。

要将星期一设置为一周的第一天，请这样的瞬间进行配置（即使使用Angular进行格式化日期）：

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

有关所有可用格式及其默认值的完整列表

隐藏日历

隐藏日历时，建议使用ng-if而不是ng-show/hide否则拖动，掉落，调整大小和日期范围选择将无法正常工作。

发展

准备您的环境

• 安装node.js和npm（应随附）
• 安装本地DEV依赖项： npm install当前目录是此存储库

开发服务器

运行npm start使用Auto Reload +运行测试在端口8000上启动开发服务器。

测试

运行npm test以运行一次测试或npm run test:watch以连续运行测试（当您运行npm start时，这是自动的）。

建造

运行npm run build以在DIST文件夹中构建项目文件

执照

麻省理工学院许可证

特此免费授予获得此软件副本和相关文档文件副本（“软件”）的任何人，以无限制处理该软件，包括无限制的使用权，复制，复制，修改，合并，合并，发布，分发，分发，分发，订婚，和/或允许软件的副本，并允许对以下条件提供以下条件，以下是以下条件。

上述版权通知和此许可通知应包含在软件的所有副本或大量部分中。

该软件是“原样”提供的，没有任何形式的明示或暗示保证，包括但不限于适销性，特定目的的适用性和非侵权的保证。在任何情况下，作者或版权持有人都不应对任何索赔，损害赔偿或其他责任责任，无论是在合同，侵权的诉讼中还是其他责任，是由软件，使用或与软件中的使用或其他交易有关的。