تقویم Calendar

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

تقویم درون خطی

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

برای نمایش تقویم موارد بسیاری را در اختیار شما قرار میدهیم که در زیر یک مثال ساده از آن آورده شده است، همچین در مثالهای بیشتر، امکانات آنرا شرح خواهیم داد.

    <div wn-type="MonthCalendar" class="calendar"></div>
    

در بالا ساده ترین نوع تقویم نمایش داده شده است، نوع تقویم و فرهنگ از مقادیر پیش فرض و متغییر های wnConfig.calendar و wnConfig.cultureInfo گرفته میشود.

اگر میخواهید، نوع تقویم و فرهنگ را به صورت دستی برای تقویم خود تعیین کنید بایستی در ادامه خصوصیات زیر را اضافه کنید.

    <div wn-type="calendar" class="calendar" calendar="WNGregorianCalendar" cultureinfo="WNCultureInfo_en_US"></div>
    <div wn-type="calendar" class="calendar" calendar="WNPersianCalendar" cultureinfo="WNCultureInfo_fa_IR"></div>

در خصوصیت calendar نام یکی از کلاسهای از پیش تعیین شده و یا شخصی سازی شده خود را وارد کنید.

در خصوصیت cultureinfo نام یکی از کلاسهای از پیش تعیین شده و یا شخصی سازی شده خود را وارد کنید.

اگر نمیدانید، چه کلاسهایی پیاده سازی شده است، کافیست برای اطلاع بیشتر اینجا را مطالعه کنید.

اعداد قابلیت نمایش به صورت محلی را دارند، مقدار پیش فرض از wnConfig.native-digit گرفته میشود، ولیکن شما میتوانید با تعیین خصوصیت native-digit = 'true' یا native-digit = 'false' این تبدیل را کنترل کنید.

نمایش چند تاریخ

شما میتوانید علاوه بر تقویم اصلی، تا دو تقویم دیگر نیز، به مجموعه تقویم خود اضافه کنید، با این کار، دو تقویم دیگر به صورت اعداد کوچکتر در زیر عدد تقویم نمایش داده میشود.

این خصوصیت برای برنامه هایی که میخواهند هم زمان دو یا سه نوع تقویم را بررسی کنند، کارآیی دارد.

همانطور که خصوصیات calendar و cultureinfo عمل میکنند، برای تقویم دوم از خصوصیات second-calendar و second-cultureinfo استفاده کنید. اگر خصوصیت second-cultureinfo را مقدار دهی نکنید، از فرهنگ لغات پیش فرضی که برای تقویم اصلی انتخاب شده است استفاده میشود.

در صورتیکه میخواهید تقویم سومی اضافه کنید، خصوصیات third-calendar و third-cultureinfo را همانند second تنظیم کنید.

همیشه تقویم دوم سمت چپ و پایین و تقویم سوم سمت راست و پایین عدد اصلی تقویم نمایش داده میشود.

تعدد نمایش تقویم در یک قاب

اگر میخواهید چند برج را هم زمان نمایش دهید، میتوانید خصوصیت view-count را مقدار دهید، این مقدار حداقل 1 و حداکثر 12 میتواند باشد.

اگر میخواهید تقویم ها به صورت افقی چینش شوند، کلاس calendar-horizontal را اضافه کنید.

مناسبتها

شما میتوانید در تقویم خود، مناسبتهای تقویمی را نمایش دهید، این مناسبتها به دو صورت عمومی و شخصی سازی شده است. در مناسبتهای عمومی بر اساس رخدادهای عمومی که در تمامی تقویم ها مشکترک است نمایش داده میشود، در مناسبتهای شخصی سازی شده، شما میتوانید یک تاریخ و یا برج و روز را مشخص کنید و هر شرحی که مد نظر است بنویسید.

برای نمایش تقویم عمومی، کافیست خصوصیت allow-comment = 'true' را اضافه کنید. بر اساس مناسبتهای تعریف شده در مدیریت اطلاعات محلی و بر اساس زبان، مناسبتها نمایش داده خواهد شد.

اگر فقط میخواهید، روزهای تعطیل مشخص شود، خصوصیت allow-date-holiday = 'true' را تنظیم کنید.

اگر میخواهید فقط مناسبتهای شخصی سازی شده نمایش داده شود و مناسبتهای عمومی نمایش داده نشود خصوصیتno-common-comment = 'true' را تنظیم کنید.

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

توجه داشته باشید، تنظیم سال، برج و روز در نوع تقویم انتخاب شده باید باشد.

اگر مقدار year را مشخص کنید، فقط در تاریخ دقیق گفته شده پیام نمایش داده میشود.

ورود برج و روز اجباری است.

انتخاب محدوده تاریخی

اگر میخواهید، تقویم فقط به انتخاب یک تاریخ محدود نشده و بتوانید یک محدوده تاریخی داشته باشید، خصوصیت date-range = 'true' را اضافه کنید. این خصوصیت باعث میشود، کاربر با انتخاب اول، ابتدای محدوده و با انتخاب دوم، انتهای محدوده را مشخص کند، بدیهی است با انتخاب های بعدی انتخاب قبلی از بین میرد.

دسترسی به تاریخهای انتخاب شده

تا به اینجا به نحوه نمایش تقویم اشاره شده است، حال باید ببینیم چطور میتوانیم به تاریخ یا تاریخهای انتخاب شده میتواند دسترسی داشت.

کلاس wncalendar دارای خصوصیاتی است که دو خصوصیت date و secondDate که هر دو از جنس wnDate هستند، امکان دسترسی به مدیریت تاریخها را به شما میدهد. date تاریخ اولین و اصلی است و اگر شما نوع انتخاب به صورت محدوده را انتخاب کرده باشید، انتهای محدوده در secondDate قابل دسترسی است.

        alert(WN('calendar-id').wn.date.toString());
        alert(WN('calendar-id').wn.secondDate.toString());

دسترسی داشتن به تاریخ ها امکان خوبی است ولی معمولا اضافه کردن کدهای تکراری به صفحه و مدیریت توسط جاوا اسکریپت آنچنان دلچسب نیست. ما برای راحتتر شدن دسترسی و ذخیره تغییرات، دو خصوصیت value-id و second-value-id را طراحی کردیم، تا زمانیکه تاریخ تغییر کرد، به صورت خودکار، مقدارهای تغییر داده شده به صورت استاندارد ISO درون موضوعات تعیین شده قرار دهد.

بنابر تعریف بالا، شما لازم دارید ابتدا یک ورودی به صورت مخفی یا غیر مخفی داشته باشید، و ID آنرا در هنگام تعریف تعیین کنید. به مثال زیر توجه کنید.

بدیهی است، اگر این ورودی ها، در ابتدا مقداری داشته باشند، مقدار پیش فرض تقویم از آنها خوانده خواهد شد.

اگر از امکان محدوده استفاده میکند، باید دو ورودی و خصوصیت second-value-id را نیز تعیین کنید.

نمایش تاریخ انتخاب شده

اگر تمایل دارید، تاریخ انتخاب شده در تقویم مد نظر و فرهنگ تعریف شده نیز در یک ورودی نمایش داده شود و همچنین با تغییر دستی آن ورودی تاریخ تقویم نیز دستخوش تغییر گردد باید خصوصیت display-id را تنظیم کنید، اگر فقط یک تاریخ باشد، تاریخ مد نظر در آن نمایش داده میشود. اگر نوع ورودی محدوده باشد، تاریخ اول ~ تاریخ دوم، نمایش داده میشود. اگر خصوصیت second-display-id را تنظیم کنید، هر تاریخ در یک ورودی جداگانه نمایش و مدیریت میشوند.

اگر تمایل دارید نوع نمایش خروجی با فرمت خاصی باشد، خصوصیت display-format را طبق استانداردهای خروجی تاریخ تعیین کنید.

اگر میخواهید بعد از انتخاب تاریع عملی را انجام دهید از رخداد selectionChanged استفاده کنید. برای تعریف میتوانید مستقیما آنرا توسط جاوا اسکریپت مقدار دهی یا به صورت خطی در خصوصیت onselectionchanged تابع مد نظر را مقدار دهی کنید. این رخداد یک پارامتر دارد که به موضوع MonthCalendar اشاره دارد.

تقویم بازشو

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

این موضوع دارای یک خصوصیت به نام autoClosePopup است که به صورت خودکار مقدار true را دارد. شما میتوانید با تنظیم آن در خصوصیت auto-close-popup عملکرد آنرا مشخص کنید. تنظیم این خصوصیت باعث میشود، موضوع به دنبال اولین dropdown والد بگردد و پس از انتخاب تاریخ، آنرا مخفی کند.

ورودی به صورت ماه و سال

تقویم بازشو در محیطهای دیگر

فقط خواندی و غیر فعال