jalendar实现日历标注及单选多选效果代码-html代码-BFW代码库

jalendar实现日历标注及单选多选效果代码

代码语言：html

所属分类：选择器

代码描述：jalendar实现日历标注及单选多选效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <!-- Jalendar files -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jalendar.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jalendar.min.js"></script>

    <!-- Jalendar files #end -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/highlight.9.9.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highlight.9.9.js"></script>

    <script type="text/javascript">
        $(function() {
            hljs.initHighlightingOnLoad();
            $('#yourId').jalendar({
                customDay: '11/01/2015',
                color: '#577e9a',
                color2: '#57c8bf',
                lang: 'TR'
            });
            $('#yourId2').jalendar({
                color: '#fff',
                type: 'linker',
                customUrl: 'http://www.bootstrap.com/?var=',
                dateType: 'mm-dd-yyyy',
                titleColor: '#333',
                weekColor: '#EA5C49',
                todayColor: '#EA5C49'
            });
            $('#yourId3').jalendar({
                type: 'selector',
                dateType: 'yyyy-mm-dd',
                done: function() {
                    alert($('#yourId3 input.data1').val());
                }
            });
            $('#yourId4').jalendar({
                customDay: '04/03/1987',
                color: '#52D3D5',
                color2: '#52D5A4',
                type: 'range',
                lang: 'TR',
                done: function() {
                    alert($('#yourId4 input.data1').val() + ' / ' + $('#yourId4 input.data2').val());
                }
            });
        });
    </script>
</head>

<body>
    <div id="fb-root"></div>
    <div class="container-fluid">
        <div class="row features"></div>
        <div class="row demos">
           
            <div class="tab-container" data-name="a">
                <div class="tab-content selected">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-8">
                                <h1>Jalendar <small>Event</small></h1>
                                <pre class="html"><code>&lt;div id="yourId" class="jalendar"&gt;    &lt;div class="added-event" data-date="19-11-2015" data-title="WWDC 13 on San Francisco, LA"&gt;&lt;/div&gt;    &lt;div class="added-event" data-date="19-11-2015" data-title="Hazal ve Bora Nikah Töreni"&gt;&lt;/div&gt;    &lt;div class="added-event" data-date="21-11-2015" data-title="Hazal ve Bora Nikah Töreni"&gt;&lt;/div&gt;    &lt;div class="added-event" data-date="22-11-2015" data-title="Hazal ve Bora Nikah Töreni at 21"&gt;&lt;/div&gt;    &lt;div class="added-event" data-date="10-12-2015" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
                                <pre class="js"><code>$('#yourId').jalendar({    customDay: '01/11/2015',    color: '#577e9a', // Unlimited    color2: '#57c8bf', // Unlimited    lang: 'TR'});</code></pre>
                            </div>
                            <div class="col-sm-4">
                                <div id="yourId" class="jalendar">
                                    <div class="added-event" data-date="19-11-2015" .........完整代码请登录后点击上方下载按钮下载查看