jquery日历控件达成形式分享,自适应备忘录2020欧

时间:2019-07-30 21:16来源:2020欧洲杯冠军竞猜官方网站
注脚掉的是暗中同意的css样式,你能够修改成团结的体裁达成另二个风格,大家参照他事他说加以考察使用吧 !DOCTYPE html html lang="en" head     meta charset="UTF-8"     meta name="viewport" conte

注脚掉的是暗中同意的css样式,你能够修改成团结的体裁达成另二个风格,大家参照他事他说加以考察使用吧

2020欧洲杯冠军竞猜官方网站 1<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>工作台-备忘录</title>
 <link rel="stylesheet" href="../css/weixincrm.min.css">
 <script type="text/javascript" src="../js/zepto.min.js"></script>
 <script type="text/javascript" src="../js/weixincrm.min.js" ></script>
 <style type="text/css">

复制代码 代码如下:

.calendar2 h2{line-height: 0.8rem;height: 0.8rem; text-align: center; color: #25a9e6; font-size: 0.32rem; background-color: #f5f5f5;}
.calendar2 table tbody{width: 100%; position: relative; z-index: 60;}
.calendar2 table{width: 100%;background-color: #fff; border-collapse:collapse;  }
.calendar2 table thead{background-color: #c6dde4;}
.calendar2 table thead  tr { height: 0.5rem; line-height: 0.5rem; }
.calendar2 table thead tr td{ color: #666; font-size: 0.26rem; text-align: center; font-weight: 500;}
.calendar2 table thead tr td .event-wekday{width: 0.6rem;}
.calendar2 table tbody{padding-top: 0.2rem;}

/**
 * jQuery Calendar Plugin
 */
(function($, window) {

.calendar2 table tbody tr{height: 0.6rem;line-height: 0.6rem; }
.calendar2 table tbody  tr td{color: #333; font-size: 0.26rem; text-align: center; padding-top: 0.2rem;font-weight: 400;}
.calendar2 table tbody tr td .event-day{width: 0.6rem; display: inline-block;border: 2px solid #fff;}
.calendar2 table tbody tr td span.active{ border: 2px solid #3399cc;border-radius: 50%;}
.calendar2 table tbody tr td .current{width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;}
.day-event2 {font-size: 0.28rem;color: #333;box-sizing: border-box; margin-left: 0.35rem; margin-right: 0.25rem; border-left: 2px solid #ddd; padding-top: 0.2rem;position: relative;display: none;}
.day-event2 .dost{width: 0.34rem; height: 0.34rem; border: 2px solid #e3e3e3; border-radius: 50%;position: absolute;    top: 0.43rem;left: -0.25rem;text-align: center;z-index: 2;}
.day-event2 .dost b{background-color: #ef5e5e; width: 0.29rem; height: 0.29rem; border-radius: 50%; position: absolute;left: 0.028rem;top: 0.025rem;}
 .day-event2 div{margin-left: 0.45rem; background-color: #fff;  padding-top: 0.15rem; border-radius: 0.05rem; padding-left: 0.2rem; position: relative;}
 .day-event2 div p{ line-height: 0.3rem;}
 .day-event2 div .arrow-left{border-bottom: 0.3rem solid transparent;border-top: 0.3rem solid transparent;border-right: 0.3rem solid #fff; font-size: 0;line-height: 0; position: absolute;left: -0.25rem;/* top: 0.4rem; */}
.day-event2 .time-text{font-size: 0.22rem; color: #999;padding-top: 0.1rem;padding-bottom: 0.1rem;}
.calendar2 table tbody tr td .current-day{ width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;border: 2px solid #3399cc;}
.calendar2 table tbody tr td .event{position: relative;background: #e7e7e7;border: 2px solid #e7e7e7;border-radius: 50%;}
 </style>

    'use strict';
    $.fn.calendar = function(options) {
        //check is select, if nothing select, return this
        if (!this.length) {
            if (options && options.debug && window.console) {
                console.log("nothing select");
            }
            return this;
        }
        var self = $(this);

</head>
<body>

        // default parameter setting
        var defaults = {
            cssPath: '', //user-define loading path of css file
            eventName: 'click', //user-define the event name that triggers the control
            onSelectDate: null, //callback function after select date
            autoClose: false
        };

<div id="section_container">
<section id="index-section"  class="active">
  <header>
  <div class="goback2"><h1>客户新闻</h1><a href="#" class="backhref"></a></div>
  <div class="calendar2 article-top-backhref2">
      <h2 class="month">9月2016</h2>
       <table>
            <thead class="head">
              <tr>
                  <td><span class="event-wekday">周日<span></td>
                  <td><span class="event-wekday">周日<span></td>
                  <td><span class="event-wekday">周日<span></td>
                  <td><span class="event-wekday">周日<span></td>
                  <td><span class="event-wekday">周日<span></td>
                  <td><span class="event-wekday">周日<span></td>
                <td><span class="event-wekday">周日<span></td>
              </tr>
            </thead>
            <tbody class="event-calendar2">
              <tr class="row1">
              <td><span class="event-day"></span></td>
              <td><span class="event-day"></span></td>
              <td><span class="event-day"></span></td>
              <td><span class="event-day"></span></td>
              <td><span class="event-day active">1</span></td>
              <td><span class="event-day">2</span></td>
              <td><span class="event-day">3</span></td>
              </tr>
              <tr class="row2">
              <td><span class="event-day">4</span></td>
              <td><span class="event-day">5</span></td>
              <td><span class="event-day">6</span></td>
              <td><span class="event-day">7</span></td>
              <td><span class="event-day">8</span></td>
              <td><span class="event-day">9</span></td>
              <td><span class="event-day">10</span></td>
              </tr>
              <tr class="row3">
              <td><span class="event-day">11</span></td>
              <td><span class="event-day">12</span></td>
              <td><span class="event-day">13</span></td>
              <td><span class="event-day">14</span></td>
              <td><span class="event-day">15</span></td>
              <td><span class="event-day">16</span></td>
              <td><span class="event-day">17</span></td>
              </tr>
              <tr class="row4">
              <td><span class="event-day">18</span></td>
              <td><span class="event-day">19</span></td>
              <td><span class="event-day current">20</span></td>
              <td><span class="event-day">21</span></td>
              <td><span class="event-day">22</span></td>
              <td><span class="event-day">23</span></td>
              <td><span class="event-day">24</span></td>
              </tr>
              <tr class="row5">
              <td><span class="event-day">25</span></td>
              <td><span class="event-day">26</span></td>
              <td><span class="event-day">27</span></td>
              
              <td><span class="event-day">30</span></td>
              <td><span class="event-day"></span></td>
              </tr>
            </tbody>
          </table>
  </div>

        //inherit user-defined parameter
        defaults = $.extend(defaults, options);

 </header>
<article class="active article-top-0 clearfix">
  <div class="scroller scroller-top">
    <div class="list">
    <!--  <div class="day-event2" date-day="19" date-month="9" date-year="2016" data-number="0" style="display: block;">
              <span class="dost"><b></b></span><div><a class="arrow-left"></a><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam</p>
              <p class="time-text">16:52</p>                 
              </div>
      </div>
        <div class="day-event2" date-day="19" date-month="9" date-year="2016" data-number="0" style="display: block;">
              <span class="dost"><b></b></span><div><a class="arrow-left"></a><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam</p>
              <p class="time-text">16:52</p>                 
              </div>
      </div> -->
     </div>
  </div>
</article>
</section>
 </div>
 <script type="text/javascript">

        //default as data of the day
        var d_date = new Date();
        var _date = {
            year: d_date.getFullYear(),
            month: d_date.getMonth() 1,
            day: d_date.getDate(),
            week: d_date.getDay()
        };

 $(document).ready(function(){
    $('.scroller').css('top',$('header').height());
 })
       
 </script>
<script src="../js/simplecalendar2.js" type="text/javascript"></script>
<!--   <script src="../js/jquery-latest.min.js" type="text/javascript"></script>
<script src="../js/simplecalendar.js" type="text/javascript"></script> -->

        //default template of plugin
        var calendarDiv = '<div id="calendar" class="cld_grid" style="display:none;z-index:100;">';
        calendarDiv = '<div id="calendar_year_month" class="cld_year_month" style="position:relative;">';
        calendarDiv = '<div id="last-year" style="position:absolute;left:30px;"><</div>';
        calendarDiv = '<div id="last-month" style="position:absolute;left:60px;"><<</div>';
        calendarDiv = '<div id="next-year" style="position:absolute;right:30px;">></div>';
        calendarDiv = '<div id="next-month" style="position:absolute;right:60px;">>></div>';
        calendarDiv = '<input style="width:40px;text-align:center;" type="text" id="calendar_year" value="' _date.year '">-<input style="width:25px;text-align:center;" type="text" id="calendar_month" value="' _date.month '"></div>'
        calendarDiv = '<div id="calendar_week_box" class="cld_week_box clearfix">';
        calendarDiv = '<div class="header-day" data-index = "0">日</div>';
        calendarDiv = '<div class="header-day" data-index = "1">一</div>';
        calendarDiv = '<div class="header-day" data-index = "2">二</div>';
        calendarDiv = '<div class="header-day" data-index = "3">三</div>';
        calendarDiv = '<div class="header-day" data-index = "4">四</div>';
        calendarDiv = '<div class="header-day" data-index = "5">五</div>';
        calendarDiv = '<div class="header-day" data-index = "6">六</div>';
        calendarDiv = '</div>';
        calendarDiv = '<div class="days clearfix">';
        for (var k = 0; k < 35; k ) {
            calendarDiv = '<div class="day"><span class="day-number">' '' '</span></div>';
        }
        calendarDiv = '</div></div>';

</body>
</html>

        var calendarAction = {
            //initialization
            initAction: function() {
                calendarAction.thisClick();
                calendarAction.inputChange();
                calendarAction.buttonChange();
                calendarAction.chooseDate();
            },

 

            //click to display
            thisClick: function() {
                self.bind(defaults.eventName, function(e) {
                    calendarAction.showCalendar();
                });
            },

var calendar = {

            //when year and month in the input box changes
            inputChange: function() {
                $('#calendar_year, #calendar_month').bind('change', function() {
                    var year = $('#calendar_year').val(),
                        month = $('#calendar_month').val();
                    if (!/^d{4}$/.test(year)) {
                        alert('please input four-digit year');
                        return false;
                    }
                    if (!/^d{1,2}$/.test(month) || (month > 12 || month <= 0)) {
                        alert('please input proper month');
                        return false;
                    }
                    //Initialize after year and month changes
                    init_day_numbers(year, month);
                });
            },

    init: function(ajax) {
        
        if (ajax) {

            //click to change year and month
            buttonChange: function() {
                $('#last-year').bind('click', function() {
                    var lastYear = parseInt($('#calendar_year').val())

//       ajax call to print json
//       
      $.ajax({
            type: 'GET',
            url: '../data/events.json',
            dataType: 'json',
          
             success: function(data){
             var events = data.events;
   // loop json & append to dom
              var myDate = new Date();
              var now = myDate.getFullYear() "/" (myDate.getMonth() 1) "/" myDate.getDate();
            for (var i = 0; i < events.length; i )
            {
                var time = events[i].year "/" events[i].month "/" events[i].day;             

  • 1 > 0 ? parseInt($('#calendar_year').val()) - 1 : 1;
                        $('#calendar_year').val(lastYear);
                        init_day_numbers(lastYear, $('#calendar_month').val());
                    });

                if(time == now )
                {
                $('.list').append('<div class="day-event2"  style="display:block;" date-day="' events[i].day '" date-month="' events[i].month '" date-year="' events[i].year '" data-number="' i '"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>' events[i].description '</p><p class="time-text">16:52</p></div></div>');

                $('#last-month').bind('click', function() {
                    var lastMonth = parseInt($('#calendar_month').val()) - 1 > 0 ? parseInt($('#calendar_month').val()) - 1 : 12,
                        thisYear = lastMonth == 12 ? parseInt($('#calendar_year').val()) - 1 : $('#calendar_year').val();
                    $('#calendar_month').val(lastMonth);
                    $('#calendar_year').val(thisYear);
                    init_day_numbers(thisYear, lastMonth);
                });

                }
                else
                {
                $('.list').append('<div class="day-event2"   date-day="' events[i].day '" date-month="' events[i].month '" date-year="' events[i].year '" data-number="' i '"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>' events[i].description '</p><p class="time-text">16:52</p></div></div>');

                $('#next-year').bind('click', function() {
                    var nextYear = parseInt($('#calendar_year').val())

                }
            }
             calendar.startCalendar();
         },
         error: function(xhr, type){
          alert('Ajax error!')
          }
      })
   
}
else {

  • 1;
                        $('#calendar_year').val(nextYear);
                        init_day_numbers(nextYear, $('#calendar_month').val());
                    });

      // if not using ajax start calendar
      calendar.startCalendar();
    }

                $('#next-month').bind('click', function() {
                    var nextMonth = parseInt($('#calendar_month').val()) 1 <= 12 ? parseInt($('#calendar_month').val()) 1 : 1,
                        thisYear = nextMonth == 1 ? parseInt($('#calendar_year').val()) 1 : $('#calendar_year').val();
                    $('#calendar_month').val(nextMonth);
                    $('#calendar_year').val(thisYear);
                    init_day_numbers(thisYear, nextMonth);
                });
            },

},

            //set the relative offset between control and webpage, then display
            showCalendar: function() {
                var o_x = self.offset().left,
                    o_y = self.offset().top self[0].offsetHeight;
                $('#calendar').css({
                    'position': 'absolute',
                    'left': o_x,
                    'top': o_y,
                    'display': 'block'
                });
            },

  startCalendar: function() {
      var mon = '周一';
        var tue = '周二';
        var wed = '周三';
        var thur = '周四';
        var fri = '周五';
        var sat = '周六';
        var sund = '周日';

            //close plugin
            closeCalendar: function() {
                $('#calendar').hide();
            },

        /**
         * Get current date
         */
        var d = new Date();
        var strDate = yearNumber "/" (d.getMonth() 1) "/" d.getDate();
        var yearNumber = (new Date).getFullYear();
        /**
         * Get current month and set as '.current-month' in title
         */
        var monthNumber = d.getMonth() 1;

            //select date
            chooseDate: function() {
                $('.day').live('click', function() {
                    var _date = $(this).attr('data-date');
                    //trigger callback function
                    if ($.isFunction(defaults.onSelectDate)) {
                        defaults.onSelectDate.call(this, _date);
                    }
                    if (defaults.autoClose) {
                        calendarAction.closeCalendar();
                    }
                });
            }
        };

        function GetMonthName(monthNumber) {
            var months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            return months[monthNumber - 1];
        }
    setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund);

        //write calendar template in webpage
        $('body').append(calendarDiv);

        function setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund) {
            $('.month').text(GetMonthName(monthNumber) ' ' yearNumber);
            $('.month').attr('data-month', monthNumber);
            printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund);
        }

        //initialize the year, month, day of calendar list
        init_day_numbers(_date.year, _date.month);

            var oSlide = document.querySelector('.calendar2 table');
            // var oList = document.querySelector('.calendar header');
            var startPoint = 0;
            var startX = 0;
            var startY= 0;
            var translateX = 0;
            var translateY= 0;
            oSlide.addEventListener('touchstart',function(e){
            
              startPoint = e.changedTouches[0].pageX;
            
              startY=e.changedTouches[0].pageY;             

        //initialize plugin action
        calendarAction.initAction();

            })

        function init_day_numbers(year, month) {
            var maxday = getmaxDay(year, month),
                firstWeek,beforeNumber,
                startIndex = beforeNumber = firstWeek = getFirstWeek(year, month),
                afterNumber = 35 - maxday - beforeNumber,
                lastMonthMaxDay = getMaxDayByLastMonth(year, month),
                nextMonthMaxDay = getMaxDayByNextMonth(year, month),
                Edge = getLastAndNextDate(year, month);
            var default_html = '';
            for (var k = 0; k < 35; k ) {
                default_html = '<div class="day"><span class="day-number">' '' '</span></div>';
            };
            $('.days').html(default_html);
            for (var s = 1; s <= maxday; s ) {
                $('.day-number').eq(startIndex).text(s);
                $('.day').eq(startIndex).attr('data-date', year '-' month '-' s);
                if (s == _date.day && year == _date.year && month == _date.month) {
                    $('.day').eq(startIndex).addClass('today');
                }
                startIndex ;
            };
            for (var k = 0; k < beforeNumber; k ) {
                var realDay = lastMonthMaxDay - beforeNumber k 1;
                $('.day-number').eq(k).text(realDay);
                $('.day-number').eq(k).addClass('last-month');
                $('.day').eq(k).attr('data-date', Edge.lastY '-' Edge.lastM '-' realDay);
            };
            for (var l = 1; l <= afterNumber; l ) {
                var _index = beforeNumber maxday (l - 1);
                $('.day-number').eq(_index).text(l);
                $('.day-number').eq(_index).addClass('next-month');
                $('.day').eq(_index).attr('data-date', Edge.nextY '-'

            oSlide.addEventListener('touchmove',function(e){
                
             translateX = e.changedTouches[0].pageX - startPoint;
             translateY = e.changedTouches[0].pageY - startY;
            
            //   translateX = startX dis;
               // translateY=
            })
 
       oSlide.addEventListener('touchend',function(e){
              
        if(Math.abs(translateX)> Math.abs(translateY))
        {
            if(startPoint.toFixed(2)==e.changedTouches[0].pageX.toFixed(2))
                {
                        
                    return false;
                }
                else
                {
                   
                if(translateX>0)
                {
                    var monthNumber = $('.month').attr('data-month');
                    if (monthNumber < 2) {
                    $('.month').attr('data-month', '13');
                    var monthNumber = $('.month').attr('data-month');
                    yearNumber = yearNumber - 1;
                
                    setTimeout(setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund),1000);
                    
                    } else {
                    
                     setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund);
                    };
                    var myDate = new Date();
                    var date=(myDate.getMonth() 1) "月" myDate.getFullYear();
                    var day=myDate.getDate();
                    var year=myDate.getFullYear();
                    var month=myDate.getMonth() 1;
                    $('.day-event2').css('display','none');
                    if($('.calendar2 .month').text().replace(" ","")==date)
                    {
                      $('.day-event2[date-month="' month '"][date-year="' year '"][date-day="' day '"]').css('display','block');

  • Edge.nextM '-' l);
                }
            }

                    }
                    // else
                    // {
                      
                    // }
                }
                 else if(translateX<0)
                     {
                       
                        var monthNumber = $('.month').attr('data-month');
                        if (monthNumber > 11) {
                        $('.month').attr('data-month', '0');
                        var monthNumber = $('.month').attr('data-month');
                        yearNumber = yearNumber 1;
                    
                        setMonth(parseInt(monthNumber) 1, mon, tue, wed, thur, fri, sat, sund);
                        } else {
                            
                        setMonth(parseInt(monthNumber) 1, mon, tue, wed, thur, fri, sat, sund);
                        };
                        var myDate = new Date();
                        var date=(myDate.getMonth() 1) "月" myDate.getFullYear();
                        var day=myDate.getDate();
                        var year=myDate.getFullYear();
                        var month=myDate.getMonth() 1;
                       $('.day-event2').css('display','none');
            
                        if($('.calendar2 .month').text().replace(" ","")==date)
                        {
                        $('.day-event2[date-month="' month '"][date-year="' year '"][date-day="' day '"]').css('display','block');

        function getLastAndNextDate(year, month) {
            var lastM = month - 1 > 0 ? month - 1 : 12,
                lastY = lastM == 12 ? year - 1 : year,
                nextM = month 1 > 12 ? 1 : month 1,
                nextY = nextM == 1 ? year 1 : year;
            return {
                lastM: lastM,
                lastY: lastY,
                nextM: nextM,
                nextY: nextY
            };
        }

                        }
                    
                                
                     }

        //obtain what the first day of one month is in a week
        function getFirstWeek(year, month) {
            var date = new Date(year, month - 1, 1);
            return date.getDay();
        }

                }

        //obtain the year, month, day of today
        function getToday() {
            var date = new Date();
            return today = [date.getFullYear(), date.getMonth() 1, date.getDate(), date.getDay()];
        }

        }
        else
        {
            return false;
        }
                
     })

        //obtain the number of days for a month
        function getmaxDay(year, month) {
            var date = new Date(year, month, 0);
            return date.getDate();
        }

        function printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund) {

        //obtain the number of days for last month
        function getMaxDayByLastMonth(year, month) {
            month = month - 1 <= 0 ? 12 : month - 1;
            year = month == 12 ? year - 1 : year;
            return getmaxDay(year, month);
        }

            $($('tbody.event-calendar2 tr')).each(function(index) {
                $(this).empty();
            });

        //obtain the number of days for next month
        function getMaxDayByNextMonth(year, month) {
            month = month 1 > 12 ? 1 : month 1;
            year = month == 1 ? year 1 : year;
            return getmaxDay(year, month);
        }

            $($('thead.head tr')).each(function(index) {
                $(this).empty();
            });

        //obtain the days list of a certain year and month, return array
        function getDayList(year, month) {
            var _list = [],
                maxday = getmaxDay(year, month),
                month = month - 1;
            for (var i = 1; i <= maxday; i ) {
                var d = new Date(year, month, i);
                _list[i - 1] = d.getDay();
            }
            return _list;
        }
    }
})(jQuery, window);

            function getDaysInMonth(month, year) {
                // Since no month has fewer than 28 days
                var date = new Date(year, month, 1);
                var days = [];
                while (date.getMonth() === month) {
                    days.push(new Date(date));
                    date.setDate(date.getDate() 1);
                }
                return days;
            }

/*
<style type="text/css">
        *{margin:0;padding:0;font-size:12px;font-family: Inconsolata, Monaco, 'Andale Mono', Courier;}
        .cld_grid{width:300px;margin:auto;}
        .cld_week_box{background-color:#3883a3;width:100%;}
        .header-day{float: left;padding: 10px 0px;width: 14.28二分之一;text-align: center;color: white;font-family:'微软雅黑'}
        .clearfix:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
        .day{float: left;
            width: 14.2857%;
            height: 13px;
            padding: 10px 0;
            text-align: center;
            color: #4f4f4f;
            background-color: #ebebeb;
            border-bottom: 2px solid white;
            background-image:url('');
            background-size: cover;
            background-position: center;
            cursor: pointer;
        }
        .days .last-month, .days .next-month {
            opacity: 0.3;
        }
        .days .today{
            background:#fff;
        }
        .cld_year_month{  
            padding: 10px;
            background-color: #71bbd2;
            text-align: center;
            color: white;
            letter-spacing: 1px;
            font-size:14px;
        }
        .cld_year_month div{cursor:pointer;}
    </style>
*/

            i = 0;

你也许感兴趣的稿子:

  • webpack中援用jquery的大致达成
  • 动用jQuery Mobile框架开辟活动端Web App的入门教程
  • 依赖jquery达成日历签到效果
  • Jquery日历插件制作简便日历
  • 为开垦者筹划的10款最棒的jQuery日历插件
  • .net mvc页面UI之Jquery博客日历控件完结代码
  • jQuery写的日历(包蕴日历的样式及功用)
  • jQuery EasyUI API 粤语文书档案 - Calendar日历行使
  • jQuery web 组件 后台日历价格、仓库储存设置的代码

            setDaysInOrder(mon, tue, wed, thur, fri, sat, sund);

            function setDaysInOrder(mon, tue, wed, thur, fri, sat, sund) {
                var monthDay = getDaysInMonth(monthNumber - 1, yearNumber)[0].toString().substring(0, 3);
                if (monthDay === 'Mon') {
                    $('thead.head tr').append('<td><span class="event-wekday">' mon '</span></td><td><span class="event-wekday">' tue '</span></td><td><span class="event-wekday">' wed '</span></td><td><span class="event-wekday">' thur '</span></td><td><span class="event-wekday">' fri '</span></td><td><span class="event-wekday">' sat '</span></td><td><span class="event-wekday">' sund '</span></td>');
                } else if (monthDay === 'Tue') {
                    $('thead.head tr').append('<td><span class="event-wekday">' tue '</span></td><td><span class="event-wekday">' wed '</span></td><td><span class="event-wekday">' thur '</span></td><td><span class="event-wekday">' fri '</span></td><td><span class="event-wekday">' sat '</span></td><td><span class="event-wekday">' sund '</span></td><td><span class="event-wekday">' mon '</span></td>');
                } else if (monthDay === 'Wed') {
                    $('thead.head tr').append('<td><span class="event-wekday">' wed '</span></td><td><span class="event-wekday">' thur '</span></td><td><span class="event-wekday">' fri '</span></td><td><span class="event-wekday">' sat '</span></td><td><span class="event-wekday">' sund '</span></td><td><span class="event-wekday">' mon '</span></td><td><span class="event-wekday">' tue '</span></td>');
                } else if (monthDay === 'Thu') {
                    $('thead.head tr').append('<td><span class="event-wekday">' thur '</span></td><td><span class="event-wekday">' fri '</span></td><td><span class="event-wekday">' sat '</span></td><td><span class="event-wekday">' sund '</span></td><td><span class="event-wekday">' mon '</span></td><td><span class="event-wekday">' tue '</span></td><td><span class="event-wekday">' wed '</span></td>');
                } else if (monthDay === 'Fri') {
                    $('thead.head tr').append('<td><span class="event-wekday">' fri '</span></td><td><span class="event-wekday">' sat '</span></td><td><span class="event-wekday">' sund '</span></td><td><span class="event-wekday">' mon '</span></td><td><span class="event-wekday">' tue '</span></td><td><span class="event-wekday">' wed '</span></td><td><span class="event-wekday">' thur '</span></td>');
                } else if (monthDay === 'Sat') {
                    $('thead.head tr').append('<td><span class="event-wekday">' sat '</span></td><td><span class="event-wekday">' sund '</span></td><td><span class="event-wekday">' mon '</span></td><td><span class="event-wekday">' tue '</span></td><td><span class="event-wekday">' wed '</span></td><td><span class="event-wekday">' thur '</span></td><td><span class="event-wekday">' fri '</span></td>');
                } else if (monthDay === 'Sun') {
                    $('thead.head tr').append('<td><span class="event-wekday">' sund '</span></td><td><span class="event-wekday">' mon '</span></td><td><span class="event-wekday">' tue '</span></td><td><span class="event-wekday">' wed '</span></td><td><span class="event-wekday">' thur '</span></td><td><span class="event-wekday">' fri '</span></td><td><span class="event-wekday">' sat '</span></td>');
                }
            };
            $(getDaysInMonth(monthNumber - 1, yearNumber)).each(function(index) {
                var index = index 1;
                if (index < 8) {
                    $('tbody.event-calendar2 tr.row1').append('<td date-month="' monthNumber '" date-day="' index '" date-year="' yearNumber '"><span class="event-day">' index '</span></td>');
                } else if (index < 15) {
                    $('tbody.event-calendar2 tr.row2').append('<td date-month="' monthNumber '" date-day="' index '" date-year="' yearNumber '"><span class="event-day">' index '</span></td>');
                } else if (index < 22) {
                    $('tbody.event-calendar2 tr.row3').append('<td date-month="' monthNumber '" date-day="' index '" date-year="' yearNumber '"><span class="event-day">' index '</span></td>');
                } else if (index < 29) {
                    $('tbody.event-calendar2 tr.row4').append('<td date-month="' monthNumber '" date-day="' index '" date-year="' yearNumber '"><span class="event-day">' index '</span></td>');
                } else if (index < 32) {
                    $('tbody.event-calendar2 tr.row5').append('<td date-month="' monthNumber '" date-day="' index '" date-year="' yearNumber '"><span class="event-day">' index '</span></td>');
                }
                i ;
            });
            var date = new Date();
            var month = date.getMonth() 1;
            var thisyear = new Date().getFullYear();
            setCurrentDay(month, thisyear);
            setEvent();
            displayEvent();
        }
            /**
         * Get current day and set as '.current-day'
         */
        function setCurrentDay(month, year) {
            var viewMonth = $('.month').attr('data-month');
            var eventYear = $('.event-days').attr('date-year');
            if (parseInt(year) === yearNumber) {
                if (parseInt(month) === parseInt(viewMonth)) {
                    $('tbody.event-calendar2 td[date-day="' d.getDate() '"] span').addClass('current-day');
                }
            }
        };

        /*$('tbody td span').on('click', function(e) {
                alert('11');
            if ($(this).hasClass('event')) {
                $('tbody.event-calendar2 td span').removeClass('active');
                $(this).addClass('active');
            } else {
                $('tbody.event-calendar2 td span').removeClass('active');
                $(this).addClass('active');
//                debugger;
//                $('.event-calendar tr td[class="active"]').text();获取日
//                $('.month').text();获取年月
            };
        });
*/
            /**
         * Add '.event' class to all days that has an event
         */
        function setEvent() {
            $('.day-event2').each(function(i) {
                var eventMonth = $(this).attr('date-month');
                var eventDay = $(this).attr('date-day');
                var eventYear = $(this).attr('date-year');
                var eventClass = $(this).attr('event-class');
                if (eventClass === undefined) eventClass = 'event';
                else eventClass = 'event ' eventClass;

                  var date = new Date();
                    var month = date.getMonth() 1;
2020欧洲杯冠军竞猜官方网站,                    var day=date.getDate();
                        if (parseInt(eventYear) === yearNumber) {
                            if(eventMonth==month&& eventDay==day)
                            {
                             $('tbody.event-calendar2 tr td[date-month="' eventMonth '"][date-day="' eventDay '"] span').addClass();
                            }
                            else
                            {
                            $('tbody.event-calendar2 tr td[date-month="' eventMonth '"][date-day="' eventDay '"] span').addClass(eventClass);
                            }
                            
                        }

            });
        };

       /**
         * Get current day on click in calendar
         * and find day-event to display
         */
        function displayEvent() {
            $('tbody.event-calendar2 td span').on('click', function(e) {
                 $('.day-event2').css('display','none');
                var monthEvent = $(this).parent().attr('date-month');;
                var dayEvent = $(this).text();
                var yearEvent = $(this).parent().attr('date-year');
                 $('.day-event2[date-month="' monthEvent '"][date-year="' yearEvent '"][date-day="' dayEvent '"]').css('display','block');
                 $('tbody.event-calendar2 td span').removeClass('active');
                $(this).addClass('active');
            });
        };

  }
}

$(document).ready(function() {
    calendar.init('ajax');
});

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:jquery日历控件达成形式分享,自适应备忘录2020欧

关键词: 欧洲杯竞猜