FullCalendar, kalendorius / darbotvarkės JQuery
Puslapis 1 iš 3
Yra tikrai bus kada nors naudojosi, arba bent jau, kad net girdėti, "Google Calendar". Įskiepiai FullCalendar JQuery leidžia jums sukurti savo pačių "Google" kalendoriaus stiliaus kalendoriaus ir galės įtraukti į savo interneto puslapiuose: galite nustatyti įvykius, trukmę ir bet kokio kito tipo informacija, kuri gali būti susijusi su kalendoriniais.
Kaip matote, į klausimą, įskiepiai yra labai naudinga keliais atvejais, pavyzdžiui, asmeninį kalendorių kūrimo ir grafiką renginių anksto laiką ir dienas.
Įskiepiai suteikia galimybę vilkite įvykius per drag > ir naudoti AJAX įkelti skrydžio renginius be atnaujinti puslapį. Be to, pratęsimo Taip pat planuojama įkelti tiesiai iš "Google" kalendoriaus įvykius, labai naudinga, jei norite importuoti įvykius šiuo formatu.
Kaip ir visi kalendoriai, kad jūs atžvilgiu Fullcalendar siūlo tris skirtingus rodinius:
- Mėnuo
- Savaitė
- Diena
Kitas už šią įskiepiai dėmesį, kad jūs galite naudoti temas, kad ji dar labiau vertingas mūsų kalendoriuje.
Pažiūrėkime keletą pavyzdžių ir kai kurių įdomesnių tinkinimus kad jūs galite gauti šį įskiepiai.
Pirma įkelti šį darbą mums reikia, kaip ir bet JQuery plugin.
Be to, kadangi poveikis yra įmanoma su drag > ir dydį ji turi taip pat importuoti JQuery UI šių poveikių.
Dėl likusios tiesiog importuoti kaip bet kuris kitas "JavaScript" bibliotekos įskiepiai ir apima CSS failą, palyginti su kalendoriniais.
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.js'> </ script>
<script type='text/javascript' src='../jquery/ui.core.js'> </ script>
<script type='text/javascript' src='../jquery/ui.draggable.js'> </ script>
<script type='text/javascript' src='../jquery/ui.resizable.js'> </ script>
<script type='text/javascript' src='../fullcalendar.min.js'> </ script>
Norėdami įjungti įskiepiai tiesiog paskambinkite funkcija fullCalendar (), žinoma įvesdami atitinkamą parametrus.
Paprastas pavyzdys, pradedant nuo "JavaScript" kodo:
<script type='text/javascript'>
$ (Dokumentas). Ready "(function () {
var data = new Date ();
var d = Date.getDate ();
var m = Date.getMonth ();
var y = Date.getFullYear ();
$ ('# Kalendorius "). FullCalendar ({
antraštė: {
kairėje: "pask, šalia, šiandien"
centras: 'title',
dešinėje: "mėnesį, agendaWeek, agendaDay"
}
redaguoti: tiesa,
Įvykiai: [
{
title: 'įvykis, kuris trunka visą dieną ",
pradžia: nauja data (Y, M, 1)
}
{
title: 'įvykis, kuris trunka keletą dienų ",
pradžia: nauja data (Y, M, D-5),
pabaigoje: nauji data (Y, M, D-2)
}
{
ID: 999
pavadinimas: "Renginių pakartoti",
pradžia: nauja data (Y, M, D-3, 16, 0),
AllDay: false
}
{
ID: 999
pavadinimas: "Renginių pakartoti",
pradžia: nauja data (Y, M, D 4, 16, 0),
AllDay: false
}
{
title: 'Susitikimas',
pradžia: nauja data (Y, M, D, 10, 30),
AllDay: false
}
{
pavadinimas: "Pietūs",
pradžia: nauja data (Y, M, D, 12, 0),
pabaigoje: nauji data (Y, M, D, 14, 0),
AllDay: false
}
{
pavadinimas: "Gimimo diena",
pradžia: nauja data (Y, M, D 1, 19, 0),
pabaigoje: nauji data (Y, M, D 1, 22, 30),
AllDay: false
}
{
pavadinimas: "Renginių external link",
pradžia: nauja data (Y, M, 28),
pabaigoje: nauji data (Y, M, 29),
url: "/"
}
]
});
});
</ Script>
Čia yra HTML / CSS, kuris bus rodomas kalendorius:
<style type='text/css'>
# Kalendorius {
Plotis: 800px;
margin: 0 auto;
}
</ Style>
<div id='calendar'> </ div>
 |
CSS (kurso)
Web dizainas ir prieinamumas pagal W3C CSS ir XHTML. Nuo 29 €. |
 |
HTML (kurso)
Žymėjimo kalbą nuo 29 € internete. |
 |
Javascript (kursų)
Užbaigti vadovą kliento-side scripting. Nuo 39 €. |