Mengapa membuat penjadual anda sendiri dan bukannya menggunakan yang sedia ada? Nah, berikut adalah beberapa kes penggunaan:
Apabila anda membina aplikasi intranet yang tidak semestinya mempunyai akses ke web luar. Dalam kes ini, anda mungkin mahu komponen mandiri yang tidak memerlukan perkhidmatan luaran dan akan menyimpan data di mana anda mahu. Atau jika anda ingin mempunyai kawalan penuh ke atas aplikasi anda dan tidak mahu bergantung pada perkhidmatan luaran
Sebelum memulakan, mari kita tentukan ciri -ciri apa yang berharga bagi kita:
Nah, mari kita mulakan sekarang.
Anda harus mendapatkan pakej perpustakaan penuh untuk menggunakan penjadual ini. Sebagai alternatif, muat turun tersuai membolehkan anda memilih modul yang anda inginkan, tetapi anda perlu mempunyai lesen komersial untuk menggunakannya. Untuk mendapatkan percubaan 30 hari, anda perlu mendaftar dengan mengisi borang web atau melalui akaun rangkaian sosial anda. Dengan cara ini, terdapat juga versi sumber terbuka Kendo UI yang tersedia. Ia dipanggil Kendo UI Core, dan anda boleh menyemak butiran pada halaman GitHub ini. Tetapi, malangnya, penjadual bukan salah satu bahagiannya.
Selepas anda mengekstrak perpustakaan, anda boleh membuat penjadual asas. Pertama, sertakan fail yang diperlukan:
<link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script>
Perhatikan bahawa anda harus memasukkan jQuery sebelum fail Kendo UI JavaScript.
Langkah seterusnya adalah untuk menentukan gaya. Selain gaya tag dan
, anda harus menentukan gaya yang sesuai untuk bekas penjadual untuk menjadikannya kelihatan baik dalam mod skrin penuh.
<span>html<span>, body</span>{
</span> <span>margin:0;
</span> <span>padding:0;
</span> <span>height: 100%;
</span><span>}
</span><span><span>#scheduler</span> {
</span> <span>border-width: 0;
</span> <span>height: 100%;
</span><span>}
</span>Sekarang anda boleh menggunakan pembina untuk memulakan penjadual:
<div ></div>
<span>$("#scheduler").kendoScheduler({
</span> <span>// The current date of the scheduler
</span> <span>date: new Date(),
</span> <span>views: [
</span> <span>"day",
</span> <span>{ type: "week", selected: true },
</span> <span>"month"
</span> <span>]
</span><span>});
</span>Harta Pandangan membolehkan anda mengaktifkan pandangan hari, minggu dan bulan dan memilih yang dipilih pada mulanya.
Kod ini akan membuat penjadual asas yang ditunjukkan di bawah:
Klik dua kali akan membuka tetingkap penciptaan acara baru.
peristiwa yang dicipta adalah draggable, jadi anda boleh menyusun semula mereka jika anda perlukan. Ciri lain yang berguna ialah kalendar mini yang berguna untuk navigasi melalui jadual.
tunjukkan jam perniagaan / Tunjukkan hari penuh butang togol akan membantu menapis acara waktu kerja anda dari yang biasa. Anda boleh menemuinya di bahagian bawah penjadual:
penjadual adalah intuitif dan mempunyai semua fungsi asas yang mungkin anda perlukan. Anda boleh membuat acara dan menggerakkannya melalui grid kalendar. Ciri -ciri tambahan seperti Mini Calendar dan Tunjukkan jam perniagaan Butang agak berguna.
Itu semua yang kita boleh dapatkan secara lalai, jadi mari kita bergerak bersama.Kalendar ini dikeluarkan di bawah lesen MIT, jadi hampir tidak ada sekatan mengenai bagaimana anda boleh menggunakannya. Terdapat cara yang berbeza untuk memasang kalendar ini: anda boleh menggunakan Bower, menambah fail yang diperlukan ke halaman anda melalui CDNJS, atau memuat turun pakej dengan fail JavaScript dan CSS. Semak halaman muat turun untuk maklumat lanjut.
Satu lagi perkara sebelum bergerak ke hadapan. Oleh kerana FullCalendar adalah plugin jQuery, jangan lupa untuk menambahkannya ke halaman anda. Ketergantungan lain adalah momen.js, perpustakaan JavaScript untuk bekerja dengan tarikh. Berikut adalah cara anda boleh memasukkan fail di halaman anda sekiranya anda menggunakan CDN:
<link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script>
Selepas itu, anda boleh menentukan bekas Div yang akan memegang kalendar, menentukan peraturan CSS jika diperlukan dan, akhirnya, memulakan kalendar. Sebagai contoh, kita mempunyai bekas:
<span>html<span>, body</span>{
</span> <span>margin:0;
</span> <span>padding:0;
</span> <span>height: 100%;
</span><span>}
</span><span><span>#scheduler</span> {
</span> <span>border-width: 0;
</span> <span>height: 100%;
</span><span>}
</span>Inilah proses inisialisasi seperti:
<div ></div>
Seperti yang anda lihat, tidak banyak kod yang anda perlukan untuk membuat kerja kalendar ini. Dan, secara lalai, tidak ada banyak ciri yang boleh anda gunakan.
di sini anda dapat melihat bagaimana penjadual lalai kelihatan:
Ini adalah paparan bulan dengan tarikh semasa yang diserlahkan, kemungkinan untuk menukar bulan yang dipaparkan, dan hari ini butang. Itu sahaja. Anda lihat, FullCalendar adalah sejenis alat diy. Terdapat banyak ciri berguna yang boleh anda gunakan, tetapi kalendar lalai adalah sangat asas. Ia adalah pilihan yang baik jika anda ingin membuat aplikasi minimalis yang hanya mempunyai ciri -ciri minimum yang diperlukan.
Mari tulis beberapa kod untuk menjadikan aplikasi kami kelihatan dan berfungsi dengan lebih baik:
<span>$("#scheduler").kendoScheduler({
</span> <span>// The current date of the scheduler
</span> <span>date: new Date(),
</span> <span>views: [
</span> <span>"day",
</span> <span>{ type: "week", selected: true },
</span> <span>"month"
</span> <span>]
</span><span>});
</span>Oleh kerana kita mahu menggunakan tema tersuai, kita harus menambah fail CSS yang diperlukan:
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css' /> <script src='https://code.jquery.com/jquery-1.11.3.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.js'></script>
hampir selesai! Langkah terakhir adalah untuk menentukan beberapa peristiwa untuk diberikan. Terdapat pelbagai cara anda boleh menentukan peristiwa: sebagai array, sebagai suapan JSON, dan juga sebagai fungsi.
Berikut adalah contoh:
<div id='calendar'></div>
Sekarang, mari kita periksa hasilnya:
lebih baik kali ini! Sekarang, anda boleh mengubah pandangan, menyeret dan mengubah saiz acara yang sedia ada, jam perniagaan ditekankan, dan pandangan minggu dan hari menapis semua acara hari dari yang lain:
Berikut adalah kesan keseluruhan FullCalendar. Ia direka sebagai alat ringan yang memberi anda kawalan penuh ke atas aplikasi anda. Anda boleh membuat aplikasi asas yang berfungsi rendah dan kemudian menambah ciri yang anda mahukan satu demi satu. Dan terdapat banyak daripada mereka: pewarna, peristiwa, penyesuaian paparan sedia ada, dan lain -lain. Semak halaman dokumentasi ini untuk senarai penuh.
Jika anda menyemak halaman muat turun, anda akan melihat bahawa terdapat edisi standard percuma yang tersedia. Selain itu, terdapat dua edisi khas yang tersedia: versi mudah alih dan versi Windows 8. Anda boleh membeli edisi pro jika anda ingin mendapatkan fungsi lanjutan.
Untuk membuat carta asas, anda harus memasukkan beberapa fail dari folder codebase ke fail html anda:
<link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script>
sekarang kita boleh menentukan bahagian yang diperlukan
<span>html<span>, body</span>{
</span> <span>margin:0;
</span> <span>padding:0;
</span> <span>height: 100%;
</span><span>}
</span><span><span>#scheduler</span> {
</span> <span>border-width: 0;
</span> <span>height: 100%;
</span><span>}
</span>Dan akhirnya, kita dapat memulakan penjadual kita:
<div ></div>
<span>$("#scheduler").kendoScheduler({
</span> <span>// The current date of the scheduler
</span> <span>date: new Date(),
</span> <span>views: [
</span> <span>"day",
</span> <span>{ type: "week", selected: true },
</span> <span>"month"
</span> <span>]
</span><span>});
</span>Kaedah init () memulakan objek dhtmlxscheduler. Dalam kes ini, penjadual akan dimulakan dalam bekas Penjualan_here yang telah ditetapkan. Tarikh Baru () akan menetapkan tarikh semasa sebagai nilai tarikh awal penjadual. Parameter "Minggu" menetapkan pandangan awal. Nilai yang mungkin adalah "hari", "minggu" dan "bulan".
semuanya sudah siap, dan kita dapat melihat bagaimana penjadual lalai kelihatan:
Secara lalai, terdapat kemungkinan untuk beralih antara pandangan hari, minggu dan bulan. Tarikh hari ini diserlahkan, tetapi jika anda kehilangan diri anda dalam jadual, gunakan Butang hari ini .
Anda boleh membuat acara baru dengan mengklik dua kali di kawasan kalendar yang betul. Mengubah saiz acara akan mengubah tempohnya. Penyusunan semula acara seret-dan-drop juga tersedia.
Untuk membuat acara jangka panjang, anda harus menggunakan butang Butiran di sebelah kiri acara.
Untuk menukar tempatnya dalam jadual anda, anda harus memilih paparan bulan.
Kendo UI adalah rangka kerja JavaScript yang besar dan maju. Ia mengandungi banyak widget dan alat. Mungkin bukan idea yang baik untuk menggunakan widget penjadualnya jika anda tidak berminat dengan komponen lain. Dokumentasi Kendo UI ditulis dengan baik, dan anda boleh menyemak sekumpulan demo penjadual ditambah dengan contoh kod. Mengenai pengekodan, ia tidak akan mengambil banyak masa untuk membina penjadual asas dan menambah beberapa ciri kepadanya. Pandangan lalai agak jelas, tetapi mudah untuk mengubahnya.
Ini adalah pilihan yang baik bagi mereka yang tahu apa yang mereka mahu. Tidak ada panduan langkah demi langkah terperinci yang menggambarkan apa yang perlu dilakukan untuk mendapatkan matlamat. Hanya panduan ringkas dan halaman dokumentasi. Ringan.
Ini adalah pilihan yang baik jika penjadual adalah semua yang anda mahukan. Terdapat contoh integrasi dengan Peta Google, jadi anda boleh melanjutkan fungsi asas jika anda perlukan. Halaman dokumentasi mengandungi satu set panduan yang mungkin berguna untuk pemula. Sekumpulan bekas
Atas ialah kandungan terperinci Perbandingan kalendar dan penjadual JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
