Lebih Sedikit Kode Kustom, Penjadwalan Lebih Cerdas: Yang Baru di Pure React Scheduler 2026 Volume 2

Penjadwalan adalah salah satu fitur yang sekilas terlihat sederhana. Kenyataannya, begitu Anda mulai berurusan dengan janji temu berulang, berbagai sumber daya, pengguna di zona waktu berbeda, atau ribuan acara, segalanya menjadi jauh lebih menantang.

Peningkatan terbaru di Syncfusion^® Komponen Pure React Scheduler dirancang untuk menyederhanakan tantangan ini. Baik Anda sedang membangun platform pemesanan janji temu, sistem penjadwalan layanan kesehatan, solusi manajemen tenaga kerja, atau aplikasi kalender pendidikan, pembaruan ini membantu mengurangi upaya pengembangan khusus sekaligus meningkatkan skalabilitas, kegunaan, dan kinerja.

Mari jelajahi apa yang baru dalam rilis Essential Studio 2026 Volume 2 untuk Pure React Scheduler dan lihat bagaimana penambahan ini dapat membantu Anda menciptakan pengalaman penjadwalan yang lebih mudah dipertahankan, berkinerja baik dalam skala besar, dan memberikan pengalaman yang lebih baik bagi pengguna.

Lihat acara mendatang lebih cepat dengan tampilan agenda

Tata letak kalender tradisional berfungsi dengan baik di layar besar, namun bisa menjadi sulit dinavigasi di perangkat seluler atau saat beberapa janji temu tumpang tindih. Menemukan acara berikutnya sering kali memerlukan pembesaran, pengguliran, atau peralihan antar tampilan.

Tampilan agenda baru mengambil pendekatan berbeda dengan menampilkan janji temu mendatang sebagai daftar yang rapi dan dikelompokkan berdasarkan tanggal. Acara disusun secara kronologis, sehingga memudahkan untuk memindai acara berikutnya tanpa kerumitan visual seperti kisi kalender tradisional.

Tampilan ini sangat berguna ketika pengguna lebih mementingkan detail acara dibandingkan penempatan kalender.

Dirancang untuk penjadwalan sehari-hari

Jika Anda pernah membuat layar penjadwalan seluler sebelumnya, Anda mungkin pernah mengalami situasi di mana tampilan bulan atau minggu menjadi berantakan. Tampilan agenda memecahkan masalah tersebut dengan memprioritaskan keterbacaan.

Aplikasi kesehatan, misalnya, dapat menampilkan janji temu dokter pada hari itu dalam jadwal yang sederhana. Demikian pula, manajer penjualan dapat dengan cepat meninjau rapat tanpa berpindah di antara beberapa tampilan kalender.

Mengapa Anda akan menghargainya

• Dioptimalkan untuk layar seluler dan tata letak yang ringkas.
• Menampilkan acara mendatang dengan jelas dengan detail lengkap.
• Menampilkan janji temu dalam urutan kronologis, dikelompokkan berdasarkan tanggal dan diurutkan berdasarkan waktu.
• Membuat peristiwa yang tumpang tindih lebih mudah ditinjau.
• Mendukung rentang tanggal yang dapat dikonfigurasi untuk melihat satu atau beberapa hari.
• Mendukung acara berulang dengan lancar.
• Termasuk dukungan aksesibilitas keyboard penuh.

Contoh

import { Scheduler, EventSettings, AgendaView } from '@syncfusion/react-scheduler'; 
import { fifaEventData } from './dataSource'; 
//Event data imported from the data source file.

export default function App() {
const eventSettings: EventSettings = { dataSource: fifaEventData };
  return (
    <div>
        <Scheduler
            defaultSelectedDate={new Date(2026, 5, 11)}
            eventSettings={eventSettings}
        >
            <AgendaView />
        </Scheduler>
    </div>
  );
}

Lihat gambar berikut.

Jadwalkan dengan percaya diri di seluruh zona waktu

Zona waktu tampak jelas hingga pengguna mulai mengikuti acara dari berbagai wilayah. Konversi hard-code dan penghitungan tanggal khusus dapat dengan cepat menjadi sulit untuk dipertahankan.

Penjadwal kini mendukung zona waktu tingkat penjadwal global dan zona waktu khusus janji temu, memastikan acara ditampilkan secara akurat di mana pun lokasi pengguna.

Setelah dikonfigurasi, konversi waktu terjadi secara otomatis, sehingga mengurangi jumlah logika khusus yang perlu diterapkan oleh pengembang.

Sebuah contoh praktis

Bayangkan tim produk menjadwalkan pertemuan dari New York sementara peserta bergabung dari London, Singapura, Dan Sidney. Setiap peserta melihat rapat dalam waktu lokalnya tanpa konversi manual apa pun.

Hal ini menghilangkan salah satu sumber kesalahan penjadwalan yang paling umum dalam tim terdistribusi.

Apa yang disederhanakan?

• Secara otomatis mengubah janji temu antar zona waktu.
• Menampilkan waktu mulai dan berakhir yang akurat untuk pengguna di seluruh dunia.
• Mengurangi kebingungan penjadwalan antar wilayah.
• Mendukung konfigurasi tingkat penjadwal dan tingkat janji temu.
• Menyederhanakan pengembangan aplikasi global.

Contoh

import { Scheduler, DayView, EventSettings, MonthView, WeekView } from '@syncfusion/react-scheduler';
import { fifaEventData } from './dataSource';

export default function App() {
    const timezone="UTC";
    const eventSettings: EventSettings = {
          dataSource: fifaEventData,
    };
  return (
   <div>
     <Scheduler
      defaultSelectedDate={new Date(2026, 5, 15)}
      eventSettings={eventSettings}
      timezone={timezone}
     >
      <DayView />
      <WeekView />
      <MonthView />
     </Scheduler>
    </div>
  );
}

Jaga agar jadwal besar tetap responsif dengan beban sesuai permintaan

Seiring berkembangnya aplikasi penjadwalan, kinerja dapat dengan cepat menjadi sebuah tantangan. Memuat janji temu dalam jumlah besar di awal akan meningkatkan ukuran payload, memperlambat rendering, dan menghabiskan sumber daya yang tidak diperlukan.

Yang baru memuat sesuai permintaan Kemampuan memecahkan masalah ini dengan memuat hanya peristiwa yang diperlukan untuk rentang tanggal yang terlihat saat ini. Saat pengguna bernavigasi antara tanggal dan tampilan, Penjadwal hanya mengambil data yang relevan, menjaga pengalaman tetap cepat dan responsif.

Dua cara untuk mengimplementasikannya

1. Pemuatan data manual dengan onDataRequest

Itu onDataRequest acara memberikan tanggal mulai dan akhir tampilan aktif, memungkinkan Anda mengambil dan mengembalikan hanya acara dalam rentang tersebut.

2. Pemuatan otomatis dengan DataManager

Sinkronisasi DataManager dapat secara otomatis menangani permintaan data selama navigasi, perubahan tampilan, dan tindakan CRUD. Ini mengirimkan rentang tanggal aktif ke server, memungkinkan pemfilteran sisi server yang efisien.

Kasus penggunaan dunia nyata

Pertimbangkan sistem penjadwalan universitas yang berisi ribuan kelas di berbagai departemen. Daripada memuat seluruh jadwal, hanya acara untuk minggu atau bulan ini yang diambil, sehingga membantu UI tetap responsif seiring bertambahnya data.

Manfaat kinerja

• Mengurangi ukuran payload API.
• Meningkatkan kecepatan rendering.
• Meminimalkan penggunaan memori.
• Menangani kumpulan data besar secara efisien.
• Menghadirkan pengalaman pengguna yang lebih cepat dan responsif.

Contoh

import { WeekView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
import { DataManager, WebApiAdaptor } from '@syncfusion/react-data';

export default function App() {
        const data = new DataManager({
            url: '
            adaptor: new WebApiAdaptor(),
            crossDomain: true
        });
 
        const eventSettings: EventSettings = {
            dataSource: data
        };
        return (
           <div>
            <Scheduler eventSettings={eventSettings}>
                <WeekView />
            </Scheduler>
           </div>
        );
}

Atur jadwal yang kompleks dengan pengelompokan sumber daya

Saat mengelola jadwal di beberapa orang, lokasi, departemen, atau aset, menampilkan semuanya dalam satu kalender dapat dengan cepat menjadi sulit untuk dinavigasi.

Pengelompokan sumber daya membantu mengatur acara ke dalam tampilan terstruktur, membuat jadwal lebih mudah dikelola dan dipahami.

Penjadwal sekarang mendukung beberapa pola pengelompokan:

1. Pengelompokan hierarki (hubungan orang tua-anak)
   Cabang → Tim → Karyawan: Ideal ketika sumber daya secara alami termasuk dalam hierarki.

2. Pengelompokan berurutan (struktur bertumpuk)
   Cabang → Tim: Berguna ketika semua cabang berbagi struktur tim yang sama.

3. Pengelompokan tanggal pertama
   Tanggal → Cabang → Tim → Karyawan: Membantu pengguna meninjau jadwal berdasarkan hari sebelum menjelajahi detail spesifik sumber daya.

Mengelola jadwal yang rumit

Pertimbangkan sistem penjadwalan rumah sakit di mana janji temu diatur berdasarkan departemen dan dokter. Administrator dapat dengan cepat melihat ketersediaan, mengidentifikasi konflik penjadwalan, dan mengelola alokasi sumber daya tanpa beralih di antara beberapa layar.

Mengapa menggunakan pengelompokan sumber daya?

• Mengaitkan peristiwa dengan sumber daya dengan jelas.
• Menyederhanakan pelacakan ketersediaan sumber daya.
• Membuat konflik penjadwalan lebih mudah diidentifikasi.
• Membantu mencegah pemesanan yang tumpang tindih.
• Mengurangi kekacauan visual dalam jadwal besar.
• Mendukung struktur organisasi yang kompleks dengan berbagai tingkatan.

Contoh

import { Scheduler, DayView, WeekView, MonthView, WorkWeekView, SchedulerResource, EventSettings } from '@syncfusion/react-scheduler';
import { multiLevelGroupingData } from './dataSource';
 
export default function App() {
    const eventSettings: EventSettings = {
        dataSource: multiLevelGroupingData,
    };
    const resources: SchedulerResource[] = [
        {
            name: 'Departments',
            dataSource: [
                { DepartmentText: 'Cardiology', Id: 1, DepartmentColor: '#e3165b' },
                { DepartmentText: 'Neurology', Id: 2, DepartmentColor: '#1aaa55' }
            ],
            field: 'DepartmentId',
            title: 'Department',
            textField: 'DepartmentText',
            idField: 'Id',
            colorField: 'DepartmentColor'
        },
        {
            name: 'Doctors',
            dataSource: [
                { DoctorText: 'Dr. Alice', Id: 1, GroupId: 1, DoctorColor: '#ff6e40' },
                { DoctorText: 'Dr. Bob', Id: 2, GroupId: 2, DoctorColor: '#7cb342' },
                { DoctorText: 'Dr. Charlie', Id: 3, GroupId: 1, DoctorColor: '#29b6f6' }
            ],
            field: 'DoctorId',
            title: 'Specialist',
            textField: 'DoctorText',
            idField: 'Id',
            groupIDField: 'GroupId',
            colorField: 'DoctorColor'
        }
    ];
    return (
        <div>
                <Scheduler
                    eventSettings={eventSettings}
                    resources={resources}
                    group={{
                        resources: ['Departments', 'Doctors']
                    }}
                    defaultSelectedDate={new Date(2026, 5, 3)}
                    startHour="08:00"
                    endHour="18:00"
                >
                    <DayView />
                    <MonthView />
                </Scheduler>
        </div>
    );
};

Lihat gambar keluaran berikut untuk pemahaman yang lebih baik.

Ubah acara berulang di masa mendatang tanpa memengaruhi riwayat

Peristiwa berulang adalah hal biasa dalam penjadwalan aplikasi, namun mengeditnya secara tradisional merupakan keputusan semua atau tidak sama sekali.

Kemampuan acara berulang yang baru memberikan lebih banyak fleksibilitas dengan memungkinkan pengguna untuk mengubah kejadian yang dipilih dan semua kejadian di masa depan sambil mempertahankan janji temu sebelumnya.

Saat diaktifkan, Penjadwal secara otomatis membagi rangkaian perulangan menjadi dua rangkaian tertaut:

• Seri asli: Berakhir sebelum kejadian yang dimodifikasi.
• Seri baru: Dimulai dari kejadian yang dipilih. Toko seri baru a followingId yang mereferensikan ID peristiwa asli, menjaga hubungannya.

Mengapa ini penting

Misalkan rapat proyek mingguan digeser dari Kamis ke Jumat mulai bulan depan. Pertemuan-pertemuan sebelumnya harus tetap tidak berubah, sedangkan pertemuan-pertemuan di masa depan harus mengikuti jadwal yang baru.

Daripada membuat ulang janji temu secara manual, pengguna dapat memperbarui rangkaian dari kejadian yang diinginkan dan seterusnya.

Manfaat utama

• Menyimpan catatan penunjukan sejarah.
• Menyederhanakan penyesuaian acara berulang.
• Mempertahankan hubungan antara seri terpisah.
• Mendukung persyaratan penjadwalan yang realistis.
• Mengurangi upaya administratif manual.

Mengapa pembaruan ini penting untuk aplikasi dunia nyata

Aspek yang paling menarik dari rilis ini bukanlah fitur tunggal—tetapi bagaimana fitur-fitur tersebut bekerja sama untuk memecahkan tantangan penjadwalan yang umum.

Pertimbangkan platform layanan kesehatan:

• Dokter meninjau janji temu menggunakan Agenda View di perangkat seluler.
• Pasien di seluruh wilayah melihat waktu janji temu mereka disesuaikan secara otomatis.
• Ribuan janji temu dimuat secara efisien melalui pengambilan sesuai permintaan.
• Departemen dan spesialis diatur melalui pengelompokan sumber daya.
• Janji temu lanjutan dapat dijadwal ulang tanpa mengganggu catatan sejarah.

Skenario seperti inilah yang dihadapi pengembang setiap hari, dan sering kali memerlukan upaya penerapan khusus yang signifikan. Kemampuan baru ini membantu mengurangi kompleksitas tersebut sekaligus menjaga kinerja aplikasi dan dapat dipelihara.

Jelajahi kemungkinan tak terbatas dengan komponen React UI yang luar biasa dari Syncfusion.

Cobalah Gratis

Siap menyederhanakan skenario penjadwalan Anda yang paling rumit?

Tantangan penjadwalan yang paling sulit jarang muncul di aplikasi versi pertama. Hal ini muncul kemudian ketika acara rutin memerlukan pengecualian, tim beroperasi melintasi zona waktu, sumber daya bertambah, dan data acara mulai ditingkatkan.

Di situlah peningkatan terbaru Syncfusion Pure React Scheduler membantu. Daripada menambahkan fitur untuk paritas fitur, rilis ini berfokus pada penyelesaian masalah penjadwalan di dunia nyata. Dari tampilan agenda dan pengelompokan sumber daya hingga dukungan zona waktu, pengambilan data sesuai permintaan, dan manajemen acara berulang, fitur-fitur ini membantu pengembang membangun aplikasi penjadwalan yang lebih mudah untuk diukur dan dipelihara.

Jika Anda sudah menjadi pengguna Syncfusion, unduh versi terbaru dari halaman Lisensi & Unduhan. Pengguna baru dapat memulai dengan uji coba gratis selama 30 hari.

Punya pertanyaan atau masukan? Terhubung dengan kami melalui forum dukungan, portal dukungan, atau portal umpan balik. Kami ingin mendengar bagaimana Anda menggunakan Pure React Scheduler di aplikasi Anda.