تقویم فارسی رویدادها برای Jquery و Bootstrap

بنام خدا

تقویم فارسی  رویدادها برای Jquery و Bootstrap  

این تقویم رویدادها بر پایه jquery و bootstrap طراحی شده است . برای اینکه این تقویم به درستی کار کند باید در صفحه مربوطه فایل های زیر بارگذاری شود .

Jquery.js

Bootstrap.js

Calendar.js

Jquery.peCalendar.js

Bootstrap.css

Jquery.peCalendar.css

پس از اینکه فایل های فوق در صفحه بارگذاری شد ، حال آماده استفاده از تقویم خواهیم بود .

با فراخوانی دستور زیر تقویم بارگذاری خواهد شد .

$(selector).peCalendar();

دستور فوق تقویم را بر اساس خصوصیات پیش فرض بارگذاری و نمایش می دهد .

main1.png

پس از بارگذاری این تقویم دارای دو قسمت می باشد . 1- جدول روز ها  2- جدول رویدادها

جدول روزها :

در این جدول روزهای مربوط به سال و ماه انتخابی نمایش داده می شود  . روزهای تعطیل به رنگ قرمز نمایش داده می شود و روزجاری در جدول با رنگ متمایز نارنجی نمایش داده می شود . در زیر این جدول تاریخ جاری یا انتخاب شده توسط کاربر نمایش داده می شود که با کلیک بر روی هر یک از روزها این تاریخ نمایش داده می شود و اطلاعات رویدادهای آن روز در جدول رویدادها نمایش داده می شود .

در بالای این جدول سمت راست ماه نمایش داده می شود که با دکمه های جلو و عقب قابل تغییر است و در قسمت سمت چپ سال نمایش داده می شود که با دکمه های جلو و عقب قابل تغییر است . با کلیک بر روی این دکمه ها علاوه بر اینکه ماه یا سال تغییر می کند اطلاعات جدول روزها و رویدادها نیز تغییر می کند .

جدول رویدادها :

این جدول تمام رویدادهای مربوط به روز انتخاب شده را نمایش می دهد . در حالت پیش فرض زمان شروع در این جدول از 00:00 تا 24:00 می باشد که به صورت یک ساعت به یک ساعت جدا شده و هر یک ساعت نیز به شش قسمت 10 دقیقه ای تقسیم شده است .

بالای این جدول یک دکمه + وجود دارد که با کلیک بر روی آن می توان رویداد جدید تعریف کرد و پس از افزودن رویداد در قسمت زمانی خود قرار خواهد گرفت . رویدادهای ثبت شده به رنگ های آبی ، سبز ، قرمز قابل نمایش می باشند که آبی نشانه اقدام نشده ، سبز اقدام شده و قرمز باطل شده است .

با کلیک بر روی هر یک از رویدادهای ثبت شده دو انتخاب ویرایش و حذف فعال می شود که می توان عملیات مروبطه را انجام داد .

main.png

شرح تنظیمات تقویم :

خصوصیت

مقدار پیش فرض

مقادیر قابل انتخاب

توضیحات

startDay

خالی

یک تاریخ به فرمت

روز/ماه/سال

تقویم را از تاریخ مقدار دهی شده نمایش می دهد .

offDayWeek

[6]

0 تا 6

یک آرایه از آعداد 0 تا 6 قابل مقدار دهی می باشد که هر عدد متعلق به یک روز از هفته می باشد و روز معادل آن در هفته را تعطیل اعمال می کند .

مثال :

اگر [5,6] باشد در تمام هفته های ماه روز پنجشنبه و جمعه تعطیل خواهد بود .

offDay

[]

آرایه ای از اشیاء

این خصوصیت روزهای تعطیل ماه در سال را مشخص می کند مثلا اگر در فروردین روزهای 1و2و3و4و12و13 تعطیل باشد به شکل زیر مقدار دهی می شود .

offDay : [

   {

        ‘year’:1398,

        ‘month’:1,

        ‘day’:[1,2,3,4,12,13]

   },

   …..

]

offDayActive

False

True,False

اگر true باشد می توان برای روزهای تعطیل نیز رویداد ثبت کرد

startTime

00:00

هر ساعتی از روز

تعیین اینکه از چه ساعتی از روز امکان ثبت رویداد وجود دارد

endTime

24:00

هر ساعتی از روز

تعیین اینکه تا چه ساعتی از روز امکان ثبت رویداد وجود دارد

Interval

10

هر عددی که 60 بر آن بخش پذیر باشد

بازه زمانی برای هر رویداد به دقیقه را تعیین می کند . پس از تعیین آن رویدادها باید ضریبی از آن باشد . مثلا اگر 15 بود رویدادها می تواند 15 دقیقه ای یا 30 دقیقه ای یا 45 دقیقه ای و یا 60 دقیقه ای باشند و ... .

Ajax

خالی

{

url:....

Data:[]

}

از طریق این خصوصیت می توان داده های مربوط به رویدادها را از سرور خواند . پارامتر data در این خصوصیت نیز داده های لازم را به سرور ارسال می کند . ارسال اطلاعات به صورت post می باشد . دریافت اطلاعات از سرور به صورت json باید باشد

Data

[]

اطلاعات رویدادها

Data:[

{

Id,startTime,endTime,

title,date,status,..

}

]

اطلاعات رویدادها چه بصورت تنظیم اولیه چه ajax در این خصوصیت  قرار می گیرد . این خصوصیت می تواند از روش های مختلف برنامه نویسی مقدار دهی شود .

فیلدهای  Id,startTime,endTime,title,date,statusباید حتما برای هر رویداد مقدار دهی شود و سایر فیلدهای اضافی مورد نیاز توسط کاربر قابل تنظیم است . فیلد id  باید منحصر به فرد باشد .

onAddEvent

متد داخلی

هر متد تعریف شده توسط کاربر

عملیات درج رویداد را می توان سفارشی کرد

onEditEvent

متد داخلی

هر متد تعریف شده توسط کاربر

عملیات ویرایش  رویداد را می توان سفارشی کرد

onDeleteEvent

متد داخلی

هر متد تعریف شده توسط کاربر

عملیات حذف  رویداد را می توان سفارشی کرد

Update_data()

 

 

بارگذاری و بازنویسی اطلاعات تقویم توسط کاربر را انجام می دهد . زمانی که از توابع درج ویرایش و حذف اطلاعات رویداد بصورت سفارشی استفاده می شود باید این متد جهت بروزرسانی اطلاعات ظاهر تقویم فراخوانی شود .

 

 

با توجه به اینکه در حالت ajax به ازاء هربار که ماه یا سال تغییر کند اطلاعات از سرور بارگذاری می شود پس در سمت سرور فقط کافی است داده های مربوط به آن ماه را از سرور خوانده شود و نیاز به ماه های دیگر نیست .

تصویر مربوط به تنظیم خصوصیت offDayWeek

dayofweek.png

تصویر مربوط به خصوصیت offDay

dayoffmonth.png

تصویر مربوط به خصوصیت startTime و endTime  و interval

time.png

time_interval.png

 

تصاویری از سفارشی کردن در یک نرم افزار جهت مقایسه و قدرت استفاده از آن در حالت های مختلف

 

clinic_app.png

 

custom_event_create_edit.png

custom_event_delete.png

مثال 1:

var per = $("#calendar").peCalendar({

   title : 'بررسی تقویم کاری',

             height : _MH,

   startDay : "",

   offDay: [

       {

           "year":1397,

           "month":12,

         "day":[5,21]

                 },

      {



                     "year":1398,

                     "month":11,

                     "day":[4,16]

      }

   ],

   offDayActive:false,

   startTime : "08:00",

   endTime: "12:00",

   interval:15,

   data:[

       {

           id:1,

           status:0,

         date:"1397/12/20",

         startTime:"08:00",

         endTime:"08:15",

         title:"test"

      },

                 {

                     id:2,

                     status:1,

                     date:"1397/12/20",

                     startTime:"08:15",

                     endTime:"08:45",

                     title:"test2"

                 }

   ]

});

مثال 2 :

Var book = $("#peCalendar").peCalendar({
   
startDay : ‘1398/01/15’,
   
startTime : ’08:00’,
   
endTime: ’13:00’,
   
title: 'بررسی تقویم کاری',
   
onAddEvent : new_event,
   
onEditEvent : edit_event,
   
onDeleteEvent:delete_event,
   
offDayWeek:day_off,
   
ajax:{
       
url:site_url+'/clinic/patient/getBooking',
       
data:{
           
doctor_id:doctor_id,
           
shift:shift
       
}
    },
});

فایل pdf توضیحات

راهنمای پرداخت