آموزش ساخت Calendar

چاپ

آموزش ساخت تقویم میلادی و شمسی در Kendo ui

در این آموزش، قصد داریم نحوه ساخت تقویم شمسی در Kendo UI را آموزش دهیم.

توجه: در تقویم بالا، زمانی که روی تاریخ نمایش داده شده در بالای ابزار، یک کلیک بکنید، می توانید بین ماه ها حرکت کنید و اگر دوباره یک کلیک دیگر بکنید، می توانید بین سال ها حرکت کنید و در ادامه اگر یک کلیک دیگر بکنید، می توانید بین دهه ها حرکت کنید.

متد ()kendoCalendar

با استفاده از متد ()kendoCalendar در Kendo UI، می توانید یک تقویم بسازید.

پیکربندی (Configuration)

پارامترتوضیح
min

کوچکترین تاریخی است که می تواند توسط کاربر انتخاب شود.
max

بزرگترین تاریخی است که می تواند توسط کاربر انتخاب شود.
start

با استفاده از پارامتر start می توانید مشخص نمایید که شروع انتخاب گزینه های تقویم، کدام یک از گزینه های سال، ماه، قرن و ... باشد.
footer

یک رشته را در پایین تقویم، تنظیم می کند.

در مثال زیر، نحوه ساخت تقویم با استفاده از متد ()kendoCalendar، و همچنین نحوه تنظیم پارامترهای مختلف تقویم نشان داده شده است:

مثال1

<!DOCTYPE html>
<html>
<head>
    <title>RTL support</title>
    <meta charset="utf-8">
    <link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="/../../../js/jquery.min.js"></script>
    <script src="/../../../js/kendo.web.min.js"></script>
    <script src="/../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <div id="example" class="k-content">            
            <div class="k-rtl">                
                <div class="demo-section">            
                    <div id="calendar"></div>
                </div>
            </div>

            <script>
                $(document).ready(function() {
                    // create Calendar from div HTML element
                    $("#calendar").kendoCalendar({
                         //min: new Date(2013,11,5),
                         //max:  new Date(2014,11,5),
                         //start: "century"//"decade"//"month"//"year",
                         //footer: "Today: #=kendo.toString(data,'d')#" 
                    });
                });
            </script>
        </div>   
            
</body>
</html>
اجرای مثال »

توجه: در مثال بالا، برای اینکه footer را با تاریخ جاری، تنظیم کنیم از متد ()kendo.toString استفاده شده است، توجه داشته باشید برای استفاده از دستورات kendo در کدتان، باید آنها را بین علامت های "=#" و "#" قرار دهید.

توجه: برای استفاده از ابزارهای Kendo UI در زبان های راست به چپ، علاوه براینکه باید فایل kendo.rtl.min.css را به صفحه لینک کنید، باید کلاس "k-rtl" را در تگ <div> مطابق مثال بالا تنظیم نمایید.

تقویم شمسی در KendoUI

برای ساخت تقویم شمسی در Kendo UI، به چند فایل js نیاز دارید، برای دانلود آنها از انتهای این آموزش اقدام فرمایید. علاوه بر این باید با استفاده از متد ()culture، زبان را تعیین نمایید:

مثال2

<!DOCTYPE html>
<html>
<head>
    <title>RTL support</title>
    <meta charset="utf-8">
    <link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="/../../../js/jquery.min.js"></script>
    <script src="/../../../js/kendo.web.min.js"></script>
    <script src="/../../content/shared/js/console.js"></script>
    
    <script src="/../../../js/shamsidate/fa-IR.js"></script>
    <script src="/../../../js/shamsidate/JalaliDate.js"></script>
    <script src="/../../../js/shamsidate/kendo.core.js"></script>
    <script src="/../../../js/shamsidate/kendo.calendar.js"></script>    
    <script>
        
    </script>
    
    
</head>
<body>

    
        <div id="example" class="k-content">            
            <div class="k-rtl">                
                <div class="demo-section">            
                    <div id="calendar"></div>
                </div>
            </div>

            <script>
                $(document).ready(function() {
                    kendo.culture("fa-IR");
                    // create Calendar from div HTML element
                    $("#calendar").kendoCalendar();
                });
            </script>
        </div>   
            
</body>
</html>
اجرای مثال »

متد ()max در Kendo UI

در مثال زیر، نحوه ی تنظیم پارامتر max، خارج از متد ()kendoCalendar نشان داده شده است:

<script>
        $(document).ready(function(){        
           var calendar = $("#calendar").data("kendoCalendar");
           calendar.max(new Date(2014,11,5));       
        });
</script>                

برگداندن مقدار پارامتر max

در مثال زیر، مقدار تنظیم شده برای پارامتر max، در عنصر با آی دی "info" قرار می گیرد:

<script>
        $(document).ready(function(){      
           var calendar = $("#calendar").data("kendoCalendar");  
           var max = calendar.max();
           $("#info").text(max);        
        });
</script>                     

تنظیم یک تاریخ مشخص برای تقویم

<script>
        $(document).ready(function(){        
           var calendar = $("#calendar").data("kendoCalendar");        
           calendar.navigate(new Date(2013,11,5), "year")       
        });
</script>            

تنظیم رویداد change با استفاده از متد ()bind

در مثال زیر، زمانی که تاریخ تقویم تغییر می کند، یک پیغام نمایش داده می شود:

<script>
        $(document).ready(function(){    
           var calendar = $("#calendar").data("kendoCalendar");                     
           calendar.bind("change",function(e){
                alert("the change function has been called!");
           })
        });
</script>            

دانلود فایل های جاوااسکریبت تاریخ شمسی در Kendo UI

پاسورد: www.beyamooz.com

حجم: 46.2 کیلو بایت

منبع: http://www.alirezazahedi.com

نوشته شده توسط امیر پهلوان صادق
بازدید: 22509