码迷，mamicode.com
首页 > 其他好文 > 详细

日历 / 日程表

时间：2017-06-30 22:25:22      阅读：159      评论：0      收藏：0      [点我收藏+]

标签：20px   array   -o   box   5.5   rgba   table   hidden   form   

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

日历 / 日程表

标签：20px   array   -o   box   5.5   rgba   table   hidden   form   

原文地址：http://www.cnblogs.com/likwin/p/7100664.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！