zoukankan      html  css  js  c++  java
  • fullcalender

    http://blog.csdn.net/francislaw/article/details/7740630

    引用

    <link rel="stylesheet" href="css/fullcalendar.css" />
    <link rel="stylesheet" href="css/nivo-slider.css" />
    <link rel="stylesheet" type="text/css" href="css/dpl-min.css" />
    <link rel="stylesheet" type="text/css" href="css/bui-min.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    
    <script src="/js/bui-min.js" type="text/javascript"></script>
    <script src="/js/fullcalendar.min.js" type="text/javascript"></script>
    <script src="/js/jcarousellite_1.0.1.js"type="text/javascript"></script>
    <script src="/js/jquery.nivo.slider.js" type="text/javascript"></script>

    HTML代码

    <div class="calendar">
        <div id="calendar">
        </div>
    </div>

    脚本代码

    //交易日历
    $('#slider').nivoSlider({
    directionNav: false,
    controlNav: true
    });
    
    $("#c_1").jCarouselLite({
    speed: 1000,
    auto: 3000,
    visible: 5,
    scroll: 2,
    btnNext: "#g_1 .next",
    btnPrev: "#g_1 .prev"
    });
    
    //<!--提示框-->
    var Tooltip = BUI.Tooltip;
    var tipinfo = new Tooltip.Tip({
    alignType: 'top',
    offset: 10,
    triggerEvent: 'click',
    autoHideType: 'click',
    title: '提示信息',
    elCls: 'tips tips-success',
     150,
    zIndex: 1000,
    offset: 10
    });
    tipinfo.render();
    
    $('#calendar').fullCalendar({
    aspectRatio: 0.5,
    // height: 310,
    contentHeight: 300,
    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    dayNames: ["日", "一", "二", "三", "四", "五", "六"],
    dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"],
    buttonText: {
        today: "今天"
    },
    
    events: function (start, end, callback) {
        var _start = new Date(start.getTime()); // Math.round() 
        var _end = new Date(end.getTime());
        $.ajax({
            type: "post",
            url: '../../Handler/Control.ashx',
            data: { option: "calendar", start: _start.getFullYear() + '-' + (_start.getMonth() + 1) + '-' + _start.getDate(), end: _end.getFullYear() + '-' + (_end.getMonth() + 1) + '-' + _end.getDate() },
            dataType: "json",
            async: false,
            success: function (data) {
                data = eval(data);
                callback(data);
            }
        });
    },
    
    eventMouseover: function (calEvent, jsEvent, view) {
        var offset = $(this).offset();
        tipinfo.set('title', calEvent.tip)
        tipinfo.show();
        var offheight = tipinfo.get('el').outerHeight(false) + 7;
        var offwidth = tipinfo.get('el').outerWidth(false) / 2 - $(this).outerWidth(false) / 2
        var top = offset.top - offheight;
        var left = offset.left - offwidth;
        tipinfo.set('x', left);
        tipinfo.set('y', top);
    
    },
    eventMouseout: function (calEvent, jsEvent, view) {
        tipinfo.hide();
    },
    viewRender: function () {
        $(".fc-day").each(function () {
            var datestr = $(this).attr('data-date');
            //                        if (selectdate.indexOf(datestr) >= 0) {
            //                            //$(this).css("background","#fff url(/templates/default/images/saledate.png) no-repeat scroll 1px 1px")
            //                        }
        })
    }
    });
  • 相关阅读:
    MySQL(DQL部分)
    Java函数式接口
    Java简易版生产者消费者模型
    浅谈Java三种实现线程同步的方法
    Linux常用命令
    计算机组成原理笔记
    资煌麻辣烫——事后诸葛亮
    资煌麻辣烫——冲刺集合
    资煌麻辣烫——测试总结
    资煌麻辣烫——冲刺总结
  • 原文地址:https://www.cnblogs.com/kongxp/p/4021163.html
Copyright © 2011-2022 走看看