{"id":14565,"date":"2025-03-08T10:45:13","date_gmt":"2025-03-08T07:45:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-ile-akilli-zamanlama-react-agendfy-ile-bildirimler-ve-calisma-saatleri\/"},"modified":"2025-03-08T10:45:13","modified_gmt":"2025-03-08T07:45:13","slug":"react-ile-akilli-zamanlama-react-agendfy-ile-bildirimler-ve-calisma-saatleri","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-ile-akilli-zamanlama-react-agendfy-ile-bildirimler-ve-calisma-saatleri\/","title":{"rendered":"React ile Ak\u0131ll\u0131 Zamanlama: react-agendfy ile Bildirimler ve \u00c7al\u0131\u015fma Saatleri"},"content":{"rendered":"

<\/p>\n

React ile Ak\u0131ll\u0131 Zamanlama: react-agendfy ile Bildirimler ve \u00c7al\u0131\u015fma Saatleri<\/p>\n

Merhaba! Bu yaz\u0131da, React uygulamalar\u0131n\u0131za g\u00fc\u00e7l\u00fc bir zamanlama ve randevu y\u00f6netimi \u00f6zelli\u011fi eklemek i\u00e7in kullanabilece\u011finiz harika bir k\u00fct\u00fcphane olan react-agendfy<\/code>‘i inceleyece\u011fiz. \u00d6zellikle bildirim y\u00f6netimi ve \u00e7al\u0131\u015fma saatleri gibi \u00f6nemli konulara odaklanarak, bu k\u00fct\u00fcphanenin sundu\u011fu avantajlar\u0131 ve kullan\u0131m\u0131n\u0131 ad\u0131m ad\u0131m ele alaca\u011f\u0131z. \u00d6ncelikle, neden react-agendfy<\/code>‘i tercih etmeliyiz diye sorabilirsiniz. K\u0131saca; hem kullan\u0131m\u0131 kolay hem de olduk\u00e7a g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n

react-agendfy<\/code>, takvim g\u00f6r\u00fcn\u00fcm\u00fcyle birlikte etkile\u015fimli bir zamanlama deneyimi sunar. Bununla birlikte, geli\u015fmi\u015f \u00f6zellikleri sayesinde, basit bir takvimden \u00e7ok daha fazlas\u0131n\u0131 yapabilirsiniz. \u00d6rne\u011fin; belirli g\u00fcn ve saatler i\u00e7in \u00e7al\u0131\u015fma saatlerinizi tan\u0131mlayabilir ve bu saatler d\u0131\u015f\u0131nda randevu olu\u015fturulmas\u0131n\u0131 engelleyebilirsiniz. Ayr\u0131ca, kullan\u0131c\u0131lar\u0131n randevular\u0131n\u0131 hat\u0131rlatacak bildirimler g\u00f6nderebilirsiniz. Bu, \u00f6zellikle randevu y\u00f6netimi gerektiren uygulamalar i\u00e7in \u00e7ok \u00f6nemli bir \u00f6zelliktir.<\/p>\n

react-agendfy Kurulumu ve Temel Kullan\u0131m\u0131<\/h2>\n

\u0130lk ad\u0131m olarak, projenize react-agendfy<\/code>‘i eklemeniz gerekiyor. Bunu npm veya yarn kullanarak kolayca yapabilirsiniz:<\/p>\n

npm install react-agendfy\n<\/code><\/pre>\n
Ard\u0131ndan, uygulaman\u0131zda react-agendfy<\/code> bile\u015fenini kullanarak takviminizi olu\u015fturun.  A\u015fa\u011f\u0131daki \u00f6rnekte basit bir takvim g\u00f6r\u00fcn\u00fcm\u00fc nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6rebilirsiniz:<\/p>\n
import { Agenda } from 'react-agendfy';\n\nfunction MyCalendar() {\n  return (\n    <Agenda events={[]} \/>\n  );\n}\n<\/code><\/pre>\n
Bu basit \u00f6rnekte, bo\u015f bir takvim g\u00f6steriliyor.  Ancak, events<\/code> dizisine randevu verileri ekleyerek takvimi doldurabilirsiniz.  Daha fazla \u00f6zelle\u015ftirme i\u00e7in k\u00fct\u00fcphanenin dok\u00fcmanlar\u0131n\u0131 inceleyebilirsiniz. react-agendfy Github Repo<\/a><\/p>\n
\u00c7al\u0131\u015fma Saatlerinin Tan\u0131mlanmas\u0131<\/h2>\n
react-agendfy<\/code> ile \u00e7al\u0131\u015fma saatlerinizi belirtmek olduk\u00e7a kolayd\u0131r.  K\u00fct\u00fcphane,  businessHours<\/code> \u00f6zelli\u011fi ile bu i\u015flevi sa\u011flar.  Bu \u00f6zellik sayesinde, belirledi\u011finiz \u00e7al\u0131\u015fma saatleri d\u0131\u015f\u0131nda randevu olu\u015fturulmas\u0131n\u0131 engelleyebilirsiniz. \u00d6rne\u011fin, hafta i\u00e7i 09:00 – 18:00 aras\u0131 \u00e7al\u0131\u015fma saatlerini tan\u0131mlamak i\u00e7in a\u015fa\u011f\u0131daki kodu kullanabilirsiniz:<\/p>\n
<Agenda \n  events={[]} \n  businessHours={[{day: 'monday', from: '09:00', to: '18:00'},{day: 'tuesday', from: '09:00', to: '18:00'}, {day: 'wednesday', from: '09:00', to: '18:00'}, {day: 'thursday', from: '09:00', to: '18:00'}, {day: 'friday', from: '09:00', to: '18:00'}]}\n\/>\n<\/code><\/pre>\n
Bildirim Y\u00f6netimi<\/h2>\n
Kullan\u0131c\u0131lara randevular\u0131n\u0131 hat\u0131rlatmak i\u00e7in bildirimler kullanmak, uygulaman\u0131z\u0131n kullan\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. react-agendfy<\/code>  bu konuda do\u011frudan destek sa\u011flamamakla beraber,  uygulaman\u0131z\u0131n arka plan\u0131nda \u00e7al\u0131\u015fan bir bildirim servisini entegre ederek  bu \u00f6zelli\u011fi ekleyebilirsiniz.  \u00d6rne\u011fin,  Firebase Cloud Messaging veya benzeri bir servis kullanabilirsiniz.  B\u00f6ylece,  randevu zaman\u0131ndan \u00f6nce kullan\u0131c\u0131lar\u0131n\u0131za bildirimler g\u00f6nderebilirsiniz.  Bu, uygulaman\u0131z\u0131n daha kullan\u0131c\u0131 dostu olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Sonu\u00e7<\/h2>\n
react-agendfy<\/code>, React uygulamalar\u0131na ak\u0131ll\u0131 zamanlama \u00f6zellikleri eklemek i\u00e7in g\u00fc\u00e7l\u00fc ve kullan\u0131m\u0131 kolay bir ara\u00e7t\u0131r.  \u00c7al\u0131\u015fma saatleri ve bildirim y\u00f6netimi gibi geli\u015fmi\u015f \u00f6zellikleri sayesinde,  karma\u015f\u0131k zamanlama senaryolar\u0131n\u0131 kolayca y\u00f6netebilirsiniz.  Bu yaz\u0131da ele ald\u0131\u011f\u0131m\u0131z temel konulara ek olarak, k\u00fct\u00fcphanenin dok\u00fcmanlar\u0131n\u0131 inceleyerek daha fazla \u00f6zelli\u011fini ke\u015ffedebilirsiniz.  Umar\u0131m bu makale, react-agendfy<\/code> ile ilgili bilgi edinmenize yard\u0131mc\u0131 olmu\u015ftur. Daha fazla React ve web geli\u015ftirme i\u00e7eri\u011fi i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Faydal\u0131 Kaynaklar:<\/strong><\/p>\n