sajt u izradi..
English French German Italian Portuguese Russian Spanish
Calendar[JavaScript]
Created: Sunday, 18.August.2013. 12:50

Kalendar je jednostavan za korišćenje i vrlo lako se se integriše u veb aplikacije. Da bi se kalendar koristio nisu potrebne programerske veštine sem elementarnog poznavanja HTML-a. Kalendar se prikazuje u pop-up prozoru ili ti poznatije kao tooltip, bez bojazni da će to blokirati neki popup bloker. Poziciju na kojoj će se pojavljivati kalendar možete namestiti po svom izboru i za svaki posebno. Vizuelni izgled kalendara se menja preko css fila, brzo i jednostavno. Kalendar se može prikazivati sa ili bez fade efekta. Izlazni format(EU, US ...) možete namestiti prema svojim potrebama. Urađena je lokalizacija za srpski i engleski jezik ali se vrlo lako moze dodati novi jezik. Da bi se kalendar koristio na vašoj veb stranici potrebno je izmedju tagova <head> </head> ubaciti sledeći kod.

<link rel="stylesheet" type="text/css" href="/kbblog/xacalendar/style.css" />
<script type="text/javascript" src="/kbblog/xacalendar/xacalendar.js"></script>


Nakon toga, tamo gde se nalazi fajl u koji ste prethodno upisali gore navedeni kod treba napraviti folder xacalendar i u njega raspakovati fajlove iz xacalendar.zip. I to je to. U narednim primerima ćemo prikazati sve mogućnosti kalendara. Aktiviranje kalendara se vrši klikom na sliku. Da bi to bilo omogućeno unutar img taga <img src="/kbblog/cal.gif"/> treba dodati onclick="XA_calendar.show('Input name','Language','Output format','Title format','Position','Fade');" tako da izgleda ovako

<img src="/kbblog/cal.gif" onclick="XA_calendar.show('Input ID','Language','Output format','Title format','Position','Fade');"/>

Input ID ili ID od input taga <input id="input_1" type="text" /> . Input ID mora biti jedinstven.
XA_calendar.show('input_1','en','%d/%m/%y','%M/%y','2,-2',1)

mt_ignore
U slučaju da Input ID nije upisan ili je upisan a ne postoji , biće prikazan popup sa opisom greške.
XA_calendar.show('wrong_name','en','%d/%m/%y','%M/%y','2,-2',1)


mt_ignore
Sledeći parametar je izbor jezika na kojem će se prikazivati kalendar. Dodavanje novog prevoda je objasnjeno ovde. U ovom primeru biće prikazan kalendar sa srpskim prevodom.
XA_calendar.show('input_3','sr','%d/%m/%y','%M/%y','2,-2',1)

mt_ignore
Kalendar sa engleskim prevodom
XA_calendar.show('input_4','en','%d/%m/%y','%M/%y','2,-2',1)

mt_ignore
Ne postoji unapred definisan izlazni format, to je prepušteno samim korisnicima da definišu prema svojim potrebama.

%d - prikaz dana u mesecu kao broj.
%m - prikaz meseca u godini kao broj.
%M - prikaz meseca u godini slovima.
%y - prikaz godine kao broj.

Između gore navedenih parametara mogu da se koriste bilo koji razdvojni znaci npr.

%d-%m-%y - 1-1-2011
%d/%m/%y - 1/1/2011
%d.%m.%y. - 1.1.2011.

u slučaju da se koristi za razdvajanje znak \ , potrebno je napisati
%y\\%M\\%y - 1\Januar\2011

Eu format %d/%m/%y ili %d.%m.%y ili %d-%m-%y

Us format %y/%m/%d

više o formatima ovde.

   
Eu format %d/%m/%y

XA_calendar.show('input_5','en','%d/%m/%y','%M/%y','2,-2',1)

mt_ignore
Eu format %d/%M/%y

XA_calendar.show('input_6','en','%d/%M/%y','%M/%y','2,-2',1)

mt_ignore
US format %y/%m/%d

XA_calendar.show('input_7','en','%y/%m/%d','%M/%y','2,-2',1)

mt_ignore
Sve što važi za izlazni format važi i za način na koji će se ispisivati trenutni mesec i godina
XA_calendar.show('input_8','en','%d/%m/%y','%M/%y','2,-2',1)

mt_ignore
XA_calendar.show('input_9','en','%d/%m/%y','%m/%y','2,-2',1)

mt_ignore
Definisanje pozicije na kojoj će se prikazivati tooltip je bazirano na kordinatnom sistemu.Prva vrednost prestavlja rastojanje po X osi od centra u pikselima a druga rastojanje po Y osi. U prethodnim primerima je korišćena pozicija 2 i -2 kao što se vidi na slici.
mt_ignore

U narednim primerima biće prikazne perostale tri mogućnosti.

   
XA_calendar.show('input_10','en','%d/%m/%y','%M/%y','2,2',1) mt_ignore
XA_calendar.show('input_11','en','%d/%m/%y','%M/%y','-2,2',1) mt_ignore
XA_calendar.show('input_12','en','%d/%m/%y','%M/%y','-2,-2',1) mt_ignore
Zadnji prarametar prestavlja fade efekat. U svim primerima korišćen je fade efekat. U sledećem primeru fade efekat će biti isključen.
XA_calendar.show('input_13','en','%d/%m/%y','%M/%y','2,-2',0)

mt_ignore
Da bi dodali nov prevod otvorite file xacalendar.js, pronađite ovaj deo koda, promenite i snimite.

var translation= new Array();
translation['en']='January,February,March,April,May,June,July,August,September,October,
November,December,Mo,Tu,We,Th,Fr,Sa,Su';
translation['sr']='Januar,Februar,Mart,April,Maj,Jun,Juli,Avgust,Semptembar,Oktobar,Novembar, Decembar,Po,Ut,Sr,Ce,Pe,Su,Ne';
translation['Next_language']='1_month,2_month,3_month,4_month,5_month,6_month, 7_month, 8_month,9_month, 10_month,11_month,12_month, 1_day,2_day,3_day,4_day,5_day,6_day,7_day';

var error_msg= new Array();
error_msg['en']='Language is not supported,Input box ID Error,Error while output in the input box';
error_msg['sr']='Prevod nije podržan,Polje za unos ne postoji,Greška prilikom upisa u polje za unos';
error_msg['next_language']='error_1,error_2,error_3';


[Source File]



Post a comment
0
Comments | Add yours
  • No comments found
Free visitor tracking, live stats, counter, conversions for Joomla, Wordpress, Drupal, Magento and Prestashop