e-calendar, 使用事件创建日历的jQuery插件

分享于 

3分钟阅读

GitHub

  繁體 雙語
jQuery plugin for create a calendar with events.
  • 源代码名称:e-calendar
  • 源代码网址:http://www.github.com/jhonis/e-calendar
  • e-calendar源代码文档
  • e-calendar源代码下载
  • Git URL:
    git://www.github.com/jhonis/e-calendar.git
    Git Clone代码到本地:
    git clone http://www.github.com/jhonis/e-calendar
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jhonis/e-calendar
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    日历

    example_image

    ####How 使用最简单的生成日历的方法是创建一个具有可以选择jQuery的元素的div。 比如: <div id="calendar"></div>

    ####Options ( 默认值)

    weekDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
     'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    textArrows: {previous:'<', next:'>'},
    eventTitle:'Eventos',
    url:'',
    events: [
     {title:'Event Title 1', description:'Description 1', datetime:newDate(2016, 0, 12, 17)},
     {title:'Event Title 2', description:'Description 2', datetime:newDate(2016, 0, 23, 16)}
    ],
    firstDayOfWeek:0

    ####Event 对象属性

    title:Event title, displayed in bold
    description:Event description
    datetime:Date and time ofevent

    使用的####Examples

    $('#calendar').eCalendar({url:'loadCalendar'});$('#calendar').eCalendar({
     events: [
     {title:'Event Title 1', description:'Description 1', datetime:newDate(2016, 0, 12, 17)},
     {title:'Event Title 2', description:'Description 2', datetime:newDate(2016, 0, 23, 16)}
     ]
    });$('#calendar').eCalendar({url:'loadCalendar',
     weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     firstDayOfWeek:1}); // calendar starting on monday | (0 - 6: week days format)//With links on the description$('#calendar').eCalendar({
     events: [
     {
     title:'Event Title 1', 
     description:'Description 1. Without link', 
     datetime:newDate(2016, 9, 20, 17) 
     },
     {
     title:'Event Title 2', 
     description:'Description 2. Only with link opening in the same tab', 
     datetime:newDate(2016, 9, 23, 16), 
     url:"https://www.google.com" },
     {
     title:'Event Title 2', 
     description:'Description 3. With link opening on new tab', 
     datetime:newDate(2016, 9, 23, 16), 
     url:"https://www.google.com", 
     url_blank:true },
     {
     title:'Event Title 2', 
     description:'Description 4. Only with link opening in the same tab', 
     datetime:newDate(2016, 9, 23, 16), 
     url:"https://www.google.com", 
     url_blank:false }
     ]
    });

    PS: 记住,在日期对象实例化中,与下面的代码一样,月从 0到 11并生成日期: 31/01/2016

    newDate(2016, 0, 31)

    plugin  CAL  EVE  event  jquery-plugin  日历  
    相关文章