首页 > 其他 > 详细

日历 / 日程表

时间：2017-06-30 21:29:56      阅读：327      评论：0      收藏：0      [点我收藏+]

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lik-fullCalendar</title>
    <link rel="stylesheet" href="css/lik_fullcalendar.css">
    <script src="js/jquery-1.8.1.min.js"></script>
    <script src="js/lik_fullcalendar.js"></script>
</head>
<body>
<div class="lik-fullcalendar" id="lik-fullcalendar">
    <div class="lik-date-view">
        <div class="date-title"><span class="prev-month"></span> <span class="cur-month"></span> <span
                class="next-month"></span> <span class="today-month" style="display: none;">本月</span></div>
        <div class="week-box">
            <div class="lik-date-item">
                <div class="lik-date-item-inner">周日</div>
            </div>
            <div class="lik-date-item">
                <div class="lik-date-item-inner">周一</div>
            </div>
            <div class="lik-date-item">
                <div class="lik-date-item-inner">周二</div>
            </div>
            <div class="lik-date-item">
                <div class="lik-date-item-inner">周三</div>
            </div>
            <div class="lik-date-item">
                <div class="lik-date-item-inner">周四</div>
            </div>
            <div class="lik-date-item">
                <div class="lik-date-item-inner">周五</div>
            </div>
            <div class="lik-date-item">
                <div class="lik-date-item-inner">周六</div>
            </div>
        </div>
        <div class="day-box">
            <div class="lik-week-row">
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
            </div>
            <div class="lik-week-row">
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
            </div>
            <div class="lik-week-row">
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
            </div>
            <div class="lik-week-row">
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
            </div>
            <div class="lik-week-row">
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
            </div>
            <div class="lik-week-row">
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
            </div>
            <div class="lik-week-row">
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
                <div class="lik-date-item" style="height: 105px;">
                    <div class="lik-date-item-inner">
                        <div class="lik-render-con">
                            <div class="visit-item visit-item-h"><p class="no-visit"></p>
                                <div class="item-operate"><span>新建</span>
                                    <div class="span-item disabled"> 更多</div>
                                </div>
                            </div>
                        </div>
                        <span class="day"></span></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

　

css部分：

@charset "utf-8";
html {
    background: #fff;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%
}

body {
    min-height: 100%
}

article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
    margin: 0;
    padding: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

audio, canvas, video {
    display: inline-block
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset, img {
    border: 0
}

iframe {
    display: block
}

abbr, acronym {
    border: 0;
    font-variant: normal
}

del {
    text-decoration: line-through
}

address, caption, cite, code, dfn, em, th, var {
    font-style: normal;
    font-weight: 500
}

ol, ul {
    list-style: none
}

caption, th {
    text-align: left
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 500
}

q:after, q:before {
    content: ‘‘
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

a:hover {
    text-decoration: underline
}

a, ins {
    text-decoration: none
}

.lik-fullcalendar .action-view, .lik-fullcalendar .count-view, .lik-fullcalendar .lik-date-view, .lik-fullcalendar .list-view {
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1000
}

.lik-fullcalendar .list-view {
    display: block !important
}

.lik-fullcalendar .count-view {
    border-top: 1px solid #eee
}

.lik-fullcalendar .lik-date-view {
    z-index: 1002
}

.lik-fullcalendar .date-view-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    bottom: 35px
}

.lik-fullcalendar .action-view {
    z-index: 1003
}

.lik-fullcalendar .action-view .j-import-in {
    display: none
}

.lik-fullcalendar .action-view .action-select-box {
    width: 140px
}

.lik-fullcalendar .action-view .action-select-box .g-select-title-wrapper {
    height: 26px;
    line-height: 26px
}

.lik-fullcalendar .action-view .action-select-box .g-select-title-wrapper i {
    top: 9px
}

.lik-fullcalendar .btn-switch-view {
    display: inline-block;
    line-height: 24px;
    padding: 0 15px;
    margin-left: 0;
    font-size: 13px;
    color: #3487e2;
    cursor: pointer;
    vertical-align: middle
}

.lik-fullcalendar .btn-switch-view:hover {
    text-decoration: underline
}

.lik-fullcalendar .count-view {
    background-color: #fff
}

.lik-fullcalendar .count-view .map-list-item {
    padding: 15px 20px
}

.lik-fullcalendar .count-view .filter-wrap {
    padding: 10px 0;
    background-color: #f4f6f9;
    border-bottom: 1px solid #eee;
    overflow: hidden
}

.lik-fullcalendar .count-view .filter-wrap .g-select-title-wrapper {
    height: 28px;
    line-height: 28px
}

.lik-fullcalendar .count-view .filter-wrap .g-select-title-wrapper i {
    top: 9px
}

.lik-fullcalendar .count-view .date-wrap, .lik-fullcalendar .count-view .sort-wrap {
    float: left;
    width: 150px;
    margin-left: 20px
}

.lik-fullcalendar .count-view .tip-wrap {
    height: 38px;
    line-height: 38px;
    color: #999;
    border-bottom: 1px solid #eee
}

.lik-fullcalendar .count-view .tip-wrap span {
    margin-left: 22px
}

.lik-fullcalendar .count-view .list-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 0
}

.lik-fullcalendar .lik-date-view .crm-g-loading {
    width: 180px;
    height: 80px;
    background-color: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #eee;
    margin-left: -90px;
    position: absolute;
    left: 50%;
    top: 150px
}

.lik-fullcalendar .visit-item {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.lik-fullcalendar .visit-item ul {
    width: 100%;
    position: absolute;
    bottom: 4px;
    left: 0
}

.lik-fullcalendar .visit-item li {
    line-height: 22px;
    position: relative;
    padding: 0 45px 0 10px
}

.lik-fullcalendar .visit-item .name {
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-height: 22px;
    color: #666
}

.lik-fullcalendar .visit-item .status {
    width: 20px;
    height: 22px;
    overflow: hidden;
    position: absolute;
    right: 4px;
    top: 0;
    font-size: 12px;
    /*background: url(../images/ico-visit-2438abb697.png) no-repeat;*/
    text-indent: -999em
}

.lik-fullcalendar .visit-item .status-0 {
    background-position: 0 2px
}

.lik-fullcalendar .visit-item .status-1 {
    background-position: -20px 3px
}

.lik-fullcalendar .visit-item .status-2 {
    background-position: -40px 3px
}

.lik-fullcalendar .visit-item .no-visit {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -9px;
    font-size: 12px;
    text-align: center;
    color: #ddd
}

.lik-fullcalendar .visit-item .item-operate {
    display: none;
    width: 100%;
    border-top: 1px dashed #eee;
    line-height: 30px;
    position: absolute;
    bottom: -31px;
    text-align: center
}

.lik-fullcalendar .visit-item .item-operate .span-item, .lik-fullcalendar .visit-item .item-operate span {
    display: inline-block;
    width: 30%;
    text-align: center;
    color: #3487e2;
    cursor: pointer;
    font-size: 14px;
}

.lik-fullcalendar .visit-item .item-operate .span-item:hover, .lik-fullcalendar .visit-item .item-operate span:hover {
    text-decoration: underline
}

.lik-fullcalendar .visit-item .item-operate .span-item:hover .more-item, .lik-fullcalendar .visit-item .item-operate span:hover .more-item {
    display: block
}

.lik-fullcalendar .visit-item .item-operate .span-item.disabled, .lik-fullcalendar .visit-item .item-operate span.disabled {
    cursor: default;
    color: #ccc;
    text-decoration: none
}

.lik-fullcalendar .visit-item .item-operate .more-item {
    display: none;
    width: 130px;
    padding: 5px 0;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 30px
}

.lik-fullcalendar .visit-item .item-operate .more-item span {
    width: 100px;
    display: block;
    padding: 0 15px;
    height: 36px;
    line-height: 36px;
    text-align: left;
    color: #666;
    text-decoration: none
}

.lik-fullcalendar .visit-item .item-operate .more-item span:hover {
    background-color: #f2f2f2
}

.lik-fullcalendar .visit-item .name {
    cursor: pointer;
    font-size: 14px;
}

.lik-fullcalendar .visit-item .name:hover {
    text-decoration: underline
}

.lik-fullcalendar .visit-item-h:hover {
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    bottom: -31px;
    background-color: #fff;
    z-index: 100
}

.lik-fullcalendar .visit-item-h:hover .no-visit {
    margin-top: -24px
}

.lik-fullcalendar .visit-item-h:hover ul {
    bottom: 35px
}

.lik-fullcalendar .visit-item-h:hover .item-operate {
    display: block;
    bottom: 0
}

.lik-fullcalendar .visit-item-h:hover .name {
    color: #3487e2
}

.lik-fullcalendar .emp-select-box {
    padding: 0 8px;
    border: 1px solid #eee;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    position: relative;
    color: #fff
}

.lik-fullcalendar .emp-select-box.disabled {
    color: #ccc;
    background-color: #f0f0f0;
    cursor: default
}

.lik-fullcalendar .emp-select-box.disabled:after, .lik-fullcalendar .emp-select-box.disabled:before {
    display: none
}

.lik-fullcalendar .emp-select-box .c-name {
    position: relative;
    display: inline-block;
    background: #3d83e9;
    height: 22px;
    margin-top: 2px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    line-height: 22px;
    padding: 0 25px 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
    max-width: 116px
}

.lik-fullcalendar .emp-select-box .c-name span {
    position: absolute;
    right: 10px
}

.lik-fullcalendar .count-view .map-l, .lik-fullcalendar .map-view .map-l {
    width: 359px;
    height: 100%;
    border-right: 1px solid #eee;
    position: relative
}

.lik-fullcalendar .count-view .scroll-el, .lik-fullcalendar .map-view .scroll-el {
    width: 100%;
    height: 100%
}

.lik-fullcalendar .count-view .map-r, .lik-fullcalendar .map-view .map-r {
    position: absolute;
    left: 360px;
    bottom: 0;
    right: 0;
    top: 0;
    background: url(../images/sec-ld-1e2eb05443.gif) 50% no-repeat
}

.lik-fullcalendar .count-view .map-r .crm-c-map-overlay, .lik-fullcalendar .map-view .map-r .crm-c-map-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff
}

.lik-fullcalendar .count-view .map-r .map-close, .lik-fullcalendar .map-view .map-r .map-close {
    display: none
}

.lik-fullcalendar .count-view .map-r .map-wraper, .lik-fullcalendar .map-view .map-r .map-wraper {
    position: static;
    width: 100%;
    height: 100%
}

.lik-fullcalendar .map-list-item {
    padding: 15px 20px 15px 55px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    color: #999;
    line-height: 20px;
    position: relative
}

.lik-fullcalendar .map-list-item.cur, .lik-fullcalendar .map-list-item:hover {
    background-color: #fafafa
}

.lik-fullcalendar .map-list-item h5 {
    padding-bottom: 5px;
    padding-right: 70px
}

.lik-fullcalendar .map-list-item .pos, .lik-fullcalendar .map-list-item .tip-pointer {
    width: 24px;
    height: 29px;
    line-height: 27px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 10px;
    top: 12px;
    background: url(../images/icon-map-dfb00c20f1.png?5.5) no-repeat;
    font-family: helvetica
}

.lik-fullcalendar .map-list-item .tip-status-1 {
    background-position: -48px 0
}

.lik-fullcalendar .map-list-item .tip-status-0 {
    background-position: -24px 0
}

.lik-fullcalendar .map-list-item .drag-btn {
    position: absolute;
    right: 15px;
    top: 40px
}

.lik-fullcalendar .map-list-item.dragging {
    background-color: #eee;
    opacity: .6
}

.lik-fullcalendar .no-map-data {
    font-size: 20px;
    text-align: center;
    color: #999;
    padding-top: 150px
}

.lik-fullcalendar .change-geo {
    position: absolute;
    right: 22px;
    top: 15px
}

.lik-fullcalendar .show-pos {
    padding: 6px 5px 0 0
}

.lik-fullcalendar .define-date-wrap {
    border: 1px solid #ddd;
    margin-top: 10px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden
}

.lik-fullcalendar .define-date-wrap .line {
    float: left;
    width: 15px;
    height: 1px;
    margin: 15px 10px;
    background-color: #ddd;
    overflow: hidden
}

.lik-fullcalendar .define-date-wrap .end-time, .lik-fullcalendar .define-date-wrap .start-time {
    width: 150px;
    float: left
}

.lik-fullcalendar .define-date-wrap .end-time .f-g-datepicker-input-wrapper input, .lik-fullcalendar .define-date-wrap .start-time .f-g-datepicker-input-wrapper input {
    width: 140px
}

.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper {
    display: block;
    width: 100%
}

.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper .date-wrapper, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper .date-wrapper {
    width: 150px;
    padding: 0;
    z-index: 22
}

.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper .date-wrapper input, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper .date-wrapper input {
    background-color: transparent
}

.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper .time-wrapper, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper .time-wrapper {
    width: 60px;
    z-index: 20
}

.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper .time-wrapper input, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper .time-wrapper input {
    width: 60px;
    padding: 0;
    border: none
}

.lik-fullcalendar .define-date-wrap .end-time .f-g-datepicker-input, .lik-fullcalendar .define-date-wrap .start-time .f-g-datepicker-input {
    border: none
}

.lik-fullcalendar .day-view {
    position: relative
}

.lik-fullcalendar .day-view .date-title {
    font-size: 20px;
    border: none;
    margin-top: -10px;
    margin-bottom: 15px;
    color: #666;
    position: relative
}

.lik-fullcalendar .day-view .today-btn {
    position: absolute;
    left: 0;
    font-size: 13px;
    color: #3487e2;
    cursor: pointer
}

.lik-fullcalendar .day-view .today-btn:hover {
    text-decoration: underline
}

.lik-fullcalendar .day-view .btns-box {
    position: absolute;
    right: 0;
    top: -2px
}

.lik-fullcalendar .day-view .btns-box span {
    padding: 0 8px;
    font-size: 13px;
    margin-left: 15px
}

.lik-fullcalendar .day-view .batch-term {
    padding: 0 20px 10px
}

.lik-fullcalendar .day-view .dt-tatal-tip {
    min-height: 48px
}

.lik-fullcalendar .day-view .dt-tatal-tip .tatal-tip {
    bottom: 15px
}

.lik-fullcalendar .day-view .drag-btn {
    display: none;
    margin-left: 10px;
    width: 20px;
    height: 20px;
    overflow: hidden;
    cursor: move;
    /*background: url(../images/ico-visit-2438abb697.png) -60px 0 no-repeat*/
}

.lik-fullcalendar .day-view tr {
    position: relative
}

.lik-fullcalendar .day-view tr.dragging {
    background-color: #eee;
    opacity: .6;
    height: 48px;
    line-height: 48px
}

.lik-fullcalendar .day-view tr.dragging td {
    padding: 0 10px
}

.lik-fullcalendar .day-list-view {
    border: 1px solid #eee;
    height: 430px;
    position: relative;
    z-index: 1
}

.lik-fullcalendar .map-view {
    background: #fff;
    position: absolute;
    left: 1px;
    top: 113px;
    bottom: 1px;
    right: 1px;
    z-index: 2
}

.lik-fullcalendar .date-scroll {
    width: 100%;
    height: 100%
}

.lik-fullcalendar .pannel-box {
    position: absolute;
    left: 0;
    top: 71px;
    bottom: 0;
    right: 0
}

.lik-fullcalendar .date-title {
    width: 100%;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    line-height: 48px;
    font-size: 16px;
    text-align: center;
    position: relative
}

.lik-fullcalendar .date-title span {
    display: inline-block
}

.lik-fullcalendar .date-title .today-month {
    position: absolute;
    left: 24px;
    top: 0;
    cursor: pointer;
    color: #3487e2;
    font-size: 13px
}

.lik-fullcalendar .date-title .today-month:hover {
    text-decoration: underline
}

.lik-fullcalendar .next-month, .lik-fullcalendar .prev-month {
    display: inline-block;
    margin: 0 5px;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    position: relative
}

.lik-fullcalendar .next-month:after, .lik-fullcalendar .next-month:before, .lik-fullcalendar .prev-month:after, .lik-fullcalendar .prev-month:before {
    content: ‘ ‘;
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 5px;
    overflow: hidden;
    border: 6px solid transparent;
    border-right-color: #3487e2
}

.lik-fullcalendar .prev-month:after {
    border-right-color: #fff;
    left: 2px
}

.lik-fullcalendar .next-month:after, .lik-fullcalendar .next-month:before {
    left: 8px;
    border-left-color: #3487e2;
    border-right-color: transparent
}

.lik-fullcalendar .next-month:after {
    border-left-color: #fff;
    left: 6px
}

.lik-fullcalendar .week-box {
    width: 100%;
    overflow: hidden
}

.lik-fullcalendar .lik-render-con {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.lik-fullcalendar .week-box .lik-date-item {
    height: 21px
}

.lik-fullcalendar .week-box .lik-date-item-inner {
    line-height: 20px;
    color: #999;
    font-size: 12px;
    text-align: center;
    min-height: 20px
}

.lik-fullcalendar .lik-date-item {
    float: left;
    width: 14.285%;
    position: relative
}

.lik-fullcalendar .lik-date-item-inner {
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    bottom: 1px;
    left: 1px
}

.lik-fullcalendar .lik-date-item-inner .day {
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 200;
    color: #666;
    font-family: Arial
}

.lik-fullcalendar .lik-next-month-day .day, .lik-fullcalendar .lik-prev-month-day .day {
    color: #ccc
}

.lik-fullcalendar .lik-cur-month-today .day {
    color: #fff;
    width: 30px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #3487e2
}

 

js部分：

/**
 * Created by Lik.
 */
$(function () {
    //get Object of Date
    var oDate = new Date();
    const onlyLikDate = new Date();
    //currentOnly year-month-date
    const currentOnlyYearMonthDate = onlyLikDate.getFullYear() + ‘-‘ + (onlyLikDate.getMonth()+1) + ‘-‘ + onlyLikDate.getDate();
    console.log(currentOnlyYearMonthDate);
    //get current year
    var currentYear = oDate.getFullYear();
    //get current month
    var currentMonth = oDate.getMonth();
    //get the day of the first day in current month and the totals of current month
    function getCurrentMonthDays(curYear, curMon) {
        console.log(curYear, curMon);
        var date = new Date();
        date.setFullYear(curYear);
        date.setMonth(curMon);
        date.setDate(1);
        var weekday = new Array(7);
        weekday[0] = ‘星期日‘;
        weekday[1] = ‘星期一‘;
        weekday[2] = ‘星期二‘;
        weekday[3] = ‘星期三‘;
        weekday[4] = ‘星期四‘;
        weekday[5] = ‘星期五‘;
        weekday[6] = ‘星期六‘;
        var lastDate = new Date(curYear, curMon + 1, 0);
        var firstDay = date.getDay();
        var daysLength = lastDate.getDate();
        console.log(firstDay, daysLength);
        //console.log("本月第一天是 " + weekday[date.getDay()] + ‘    本月最后一天是 ‘ + lastDate.getDate());
        console.log($(‘#lik-fullcalendar .day-box .lik-date-item‘).length);
        //clear class and day content
        var likDateLen = $(‘#lik-fullcalendar .day-box .lik-date-item‘).length
        for(var i=0;i<likDateLen;i++){
            $(‘#lik-fullcalendar .day-box .lik-date-item‘).eq(i).css(‘zIndex‘, likDateLen-i).removeClass(‘lik-prev-month-day‘).removeClass(‘lik-cur-month-day‘).removeClass(‘lik-next-month-day‘).find(‘span.day‘).html(‘‘);
            $(‘span.day‘).eq(i).html(‘‘);
        }
        //add class ‘lik-prev-month-day‘ for previous month
        for(var i=0;i<firstDay;i++){
            $(‘#lik-fullcalendar .day-box .lik-date-item‘).eq(i).addClass(‘lik-prev-month-day‘);
        }
        //get prev month totals
        var prevMonthTotals = (new Date(curYear, curMon, 0)).getDate();
        var prevMonthLose = $(‘#lik-fullcalendar .day-box .lik-prev-month-day‘).length;
        for(var i=0;i<prevMonthLose;i++){
            $(‘#lik-fullcalendar .day-box .lik-prev-month-day‘).eq(i).find(‘span.day‘).html(prevMonthTotals+i-prevMonthLose+1);
        }
        //add class ‘lik-cur-month-day‘ for current month
        for(var i=firstDay;i<daysLength+firstDay;i++){
            $(‘#lik-fullcalendar .day-box .lik-date-item‘).eq(i).addClass(‘lik-cur-month-day‘).attr(‘lik-data-date‘, curYear+‘-‘+(curMon+1)+‘-‘+(i+1-firstDay));
        }
        //current date light
        $.each($(‘.lik-date-item‘), function (i, v) {
            $(‘.lik-date-item‘).eq(i).removeClass(‘lik-cur-month-today‘);
            if ($(‘.lik-date-item‘).eq(i).attr(‘lik-data-date‘) == currentOnlyYearMonthDate) {
                $(‘.lik-date-item‘).eq(i).addClass(‘lik-cur-month-today‘);
            }
        });
        //add class ‘lik-next-month-day‘ for next month
        for(var i=daysLength+firstDay;i<$(‘#lik-fullcalendar .day-box .lik-date-item‘).length;i++){
            $(‘#lik-fullcalendar .day-box .lik-date-item‘).eq(i).addClass(‘lik-next-month-day‘);
        }
        var nextMonthLose = $(‘#lik-fullcalendar .day-box .lik-next-month-day‘).length;
        for(var i=0;i<nextMonthLose;i++){
            $(‘#lik-fullcalendar .day-box .lik-next-month-day‘).eq(i).find(‘span.day‘).html(i + 1);
        }
        //add dates for current month
        for(var i=0;i<$(‘#lik-fullcalendar .day-box .lik-cur-month-day‘).length;i++){
            $(‘#lik-fullcalendar .day-box .lik-cur-month-day‘).eq(i).find(‘span.day‘).html(i + 1);
        }
        //lik-week-row show/unshow
        $.each($(‘#lik-fullcalendar .lik-week-row‘), function(i, v){
            if(!$(‘#lik-fullcalendar .lik-week-row‘).eq(i).find(‘.lik-date-item‘).hasClass(‘lik-cur-month-day‘)){
                $(‘#lik-fullcalendar .lik-week-row‘).eq(i).css(‘display‘, ‘none‘);
            }else{
                $(‘#lik-fullcalendar .lik-week-row‘).eq(i).css(‘display‘, ‘block‘);
            }
        })
    }

    //current month show / unshow
    function likCurrentMonthShow(curYear, curMonth) {
        if (curYear == onlyLikDate.getFullYear() && curMonth == onlyLikDate.getMonth()) {
            $(‘#lik-fullcalendar .today-month‘).css(‘display‘, ‘none‘);
        } else {
            $(‘#lik-fullcalendar .today-month‘).css(‘display‘, ‘block‘);
        }
    }

    getCurrentMonthDays(currentYear, currentMonth);

    $(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
    //prev month
    $(‘#lik-fullcalendar .prev-month‘).on(‘click‘, function () {
        if (currentMonth == 0) {
            currentMonth = 11;
            currentYear -= 1;
            oDate.setFullYear(currentYear);
            $(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
        } else {
            currentMonth--;
            oDate.setMonth(currentMonth);
            $(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
        }
        likCurrentMonthShow(currentYear, currentMonth);
        getCurrentMonthDays(currentYear, currentMonth);
    });
    //next month
    $(‘#lik-fullcalendar .next-month‘).on(‘click‘, function () {
        if (currentMonth >= 11) {
            currentMonth = 0;
            currentYear += 1;
            oDate.setFullYear(currentYear);
            $(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
        } else {
            currentMonth++;
            oDate.setMonth(currentMonth);
            $(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
        }
        likCurrentMonthShow(currentYear, currentMonth);
        getCurrentMonthDays(currentYear, currentMonth);
    });
    //go back to current month
    $(‘#lik-fullcalendar .today-month‘).on(‘click‘, function () {
        //get current year
        currentYear = onlyLikDate.getFullYear();
        //get current month
        currentMonth = onlyLikDate.getMonth();
        console.log(currentYear, currentMonth);
        $(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
        likCurrentMonthShow(currentYear, currentMonth);
        getCurrentMonthDays(currentYear, currentMonth);
    })

});

　　

实际效果可先查看以下网址：

http://www.91lik.win/lik-fullcalendar/index.html

日历 / 日程表

原文：http://www.cnblogs.com/likwin/p/7100664.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！