Expo ile oluşturulmuş özelleştirilebilir takvim uygulaması
npm install @canakyuz/calendarExpo ile oluşturulmuş, özelleştirilebilir ve kullanımı kolay bir takvim uygulaması.
Paketi kurmak için aşağıdaki komutu kullanabilirsiniz:
``bash`
npm install @canakyuz/calendar
veya
`bash`
yarn add @canakyuz/calendar
- Genel Bakış
- Bileşenler
- Calendar
- DailyView
- WeeklyView
- MonthlyView
- CalendarHeader
- DateSelector
- Temalar
- Minimal Mod
- Örnekler
- Geliştirme
- Sürüm Notları
- Lisans
@canakyuz/calendar paketi, React Native ve Expo projeleri için tam özelleştirilebilir bir takvim çözümüdür. Ana bileşen olan Calendar'ı kullanarak başlayabilir veya alt bileşenleri ihtiyaçlarınıza göre ayrı ayrı kullanabilirsiniz.
Paket, aşağıdaki görünüm modlarını destekler:
- Günlük Görünüm: Tek bir günün detaylı incelemesi
- Haftalık Görünüm: Bir haftanın genel görünümü
- Aylık Görünüm: Tam ay takvimi
- Minimal Mod: Sadece temel takvim işlevselliği için optimize edilmiş hafif versiyon
Calendar, paketin ana bileşenidir ve tüm görünüm modlarını ve özellikleri içerir.
`jsx
import React from 'react';
import { View } from 'react-native';
import { Calendar } from '@canakyuz/calendar';
export default function CalendarExample() {
const handleDateSelect = (date) => {
console.log('Seçilen tarih:', date);
};
return (
onDatePress={handleDateSelect}
view="weekly" // 'daily', 'weekly', 'monthly' veya 'agenda'
theme={{
primaryColor: '#3498db',
textColor: '#333',
todayColor: '#e74c3c',
selectedDayColor: '#2980b9'
}}
tasks={[
{
id: '1',
title: 'Toplantı',
startTime: new Date(2023, 9, 15, 10, 0),
endTime: new Date(2023, 9, 15, 11, 30),
color: '#e74c3c'
},
{
id: '2',
title: 'Öğle Yemeği',
startTime: new Date(2023, 9, 15, 12, 0),
endTime: new Date(2023, 9, 15, 13, 0),
color: '#2ecc71'
}
]}
/>
);
}
`
#### Calendar Props
| Prop | Tip | Varsayılan | Açıklama |
|------|-----|------------|----------|
| date | Date | Bugün | Takvimin göstereceği tarih |
| view | 'daily' \| 'weekly' \| 'monthly' \| 'agenda' | 'weekly' | Takvimin görünüm modu |
| tasks | Task[] | [] | Gösterilecek etkinlikler dizisi |
| onDatePress | (date: Date) => void | - | Bir tarih seçildiğinde çalışacak fonksiyon |
| onTaskPress | (task: Task) => void | - | Bir etkinliğe tıklandığında çalışacak fonksiyon |
| theme | ThemeProps | {} | Takvimin teması |
| minimalMode | boolean | false | Minimal modu aktifleştirir |
| compact | boolean | false | Kompakt görünüm modunu aktifleştirir |
| showHeader | boolean | true | Takvim başlığını gösterir/gizler |
| showNavigation | boolean | true | Navigasyon düğmelerini gösterir/gizler |
| renderDayContent | (date: Date, events: Task[]) => React.ReactNode | - | Özel gün içeriği renderlamak için fonksiyon |
| logoSource | any | - | Sol üstteki logo için kaynak |
| notificationIcon | React.ReactNode | - | Sağ üstteki bildirim ikonu |
| renderLogo | () => React.ReactNode | - | Özel logo render fonksiyonu |
| renderNotification | () => React.ReactNode | - | Özel bildirim ikonu render fonksiyonu |
| renderHeader | () => React.ReactNode | - | Özel başlık render fonksiyonu |
| hideNotification | boolean | false | Bildirim ikonunu gizler |
| hideLogo | boolean | false | Logoyu gizler |
DailyView, tek bir günün detaylı görünümünü sağlar.
`jsx
import React from 'react';
import { View } from 'react-native';
import { DailyView } from '@canakyuz/calendar';
export default function DailyViewExample() {
return (
tasks={[
{
id: '1',
title: 'Sabah Toplantısı',
startTime: new Date(2023, 9, 15, 9, 0),
endTime: new Date(2023, 9, 15, 10, 0),
color: '#9b59b6'
}
]}
onTaskPress={(task) => console.log('Seçilen etkinlik:', task)}
onDatePress={(date) => console.log('Seçilen tarih:', date)}
theme={{
backgroundColor: '#fff',
textColor: '#333'
}}
hourRange={{ start: 8, end: 20 }} // 08:00 - 20:00 arası görünüm
/>
);
}
`
#### DailyView Props
| Prop | Tip | Varsayılan | Açıklama |
|------|-----|------------|----------|
| date | Date | Bugün | Gösterilecek gün |
| tasks | Task[] | [] | Gösterilecek etkinlikler |
| onTaskPress | (task: Task) => void | - | Etkinliğe tıklandığında çalışacak fonksiyon |
| onDatePress | (date: Date) => void | - | Tarihe tıklandığında çalışacak fonksiyon |
| theme | ThemeProps | {} | Görünüm teması |
| hourRange | { start: number; end: number } | { start: 0, end: 24 } | Görüntülenecek saat aralığı |
WeeklyView, bir haftanın genel görünümünü sağlar.
`jsx
import React from 'react';
import { View } from 'react-native';
import { WeeklyView } from '@canakyuz/calendar';
export default function WeeklyViewExample() {
return (
tasks={[
{
id: '1',
title: 'Haftalık Toplantı',
startTime: new Date(2023, 9, 12, 14, 0),
endTime: new Date(2023, 9, 12, 15, 30),
color: '#3498db'
}
]}
onTaskPress={(task) => console.log('Seçilen etkinlik:', task)}
onDatePress={(date) => console.log('Seçilen tarih:', date)}
theme={{
backgroundColor: '#f9f9f9',
textColor: '#333'
}}
hourRange={{ start: 9, end: 18 }} // 09:00 - 18:00 arası görünüm
/>
);
}
`
#### WeeklyView Props
| Prop | Tip | Varsayılan | Açıklama |
|------|-----|------------|----------|
| date | Date | Bugün | Gösterilecek haftanın başlangıç tarihi |
| tasks | Task[] | [] | Gösterilecek etkinlikler |
| onTaskPress | (task: Task) => void | - | Etkinliğe tıklandığında çalışacak fonksiyon |
| onDatePress | (date: Date) => void | - | Tarihe tıklandığında çalışacak fonksiyon |
| theme | ThemeProps | {} | Görünüm teması |
| hourRange | { start: number; end: number } | { start: 0, end: 24 } | Görüntülenecek saat aralığı |
MonthlyView, tam bir ay takvimi görünümü sağlar.
`jsx
import React from 'react';
import { View } from 'react-native';
import { MonthlyView } from '@canakyuz/calendar';
export default function MonthlyViewExample() {
return (
tasks={[
{
id: '1',
title: 'Aylık Rapor',
startTime: new Date(2023, 9, 25, 10, 0),
endTime: new Date(2023, 9, 25, 11, 0),
color: '#2ecc71'
}
]}
onTaskPress={(task) => console.log('Seçilen etkinlik:', task)}
onDatePress={(date) => console.log('Seçilen tarih:', date)}
theme={{
backgroundColor: '#fff',
textColor: '#333'
}}
/>
);
}
`
#### MonthlyView Props
| Prop | Tip | Varsayılan | Açıklama |
|------|-----|------------|----------|
| date | Date | Bugün | Gösterilecek ay |
| tasks | Task[] | [] | Gösterilecek etkinlikler |
| onTaskPress | (task: Task) => void | - | Etkinliğe tıklandığında çalışacak fonksiyon |
| onDatePress | (date: Date) => void | - | Tarihe tıklandığında çalışacak fonksiyon |
| theme | ThemeProps | {} | Görünüm teması |
CalendarHeader, takvim başlığını ve navigasyon düğmelerini içerir.
`jsx
import React from 'react';
import { View } from 'react-native';
import { CalendarHeader } from '@canakyuz/calendar';
export default function CalendarHeaderExample() {
return (
onPrevious={() => console.log('Önceki')}
onNext={() => console.log('Sonraki')}
title="Ekim 2023"
onTitlePress={() => console.log('Başlığa tıklandı')}
theme={{
headerBackgroundColor: '#f8f8f8',
headerTextColor: '#333'
}}
leftContent={
rightContent={
onLeftPress={() => console.log('Sol düğmeye tıklandı')}
onRightPress={() => console.log('Sağ düğmeye tıklandı')}
/>
);
}
`
#### CalendarHeader Props
| Prop | Tip | Varsayılan | Açıklama |
|------|-----|------------|----------|
| date | Date | Bugün | Başlıkta gösterilecek tarih |
| onPrevious | (newDate?: Date) => void | - | Önceki düğmesine tıklandığında çalışacak fonksiyon |
| onNext | (newDate?: Date) => void | - | Sonraki düğmesine tıklandığında çalışacak fonksiyon |
| title | string | - | Özel başlık metni |
| onTitlePress | () => void | - | Başlığa tıklandığında çalışacak fonksiyon |
| theme | ThemeProps | {} | Başlık teması |
| leftContent | React.ReactNode | - | Sol tarafta gösterilecek özel içerik |
| rightContent | React.ReactNode | - | Sağ tarafta gösterilecek özel içerik |
| onLeftPress | () => void | - | Sol içeriğe tıklandığında çalışacak fonksiyon |
| onRightPress | () => void | - | Sağ içeriğe tıklandığında çalışacak fonksiyon |
DateSelector, tarih seçimi için bir arayüz sağlar.
`jsx
import React, { useState } from 'react';
import { View } from 'react-native';
import { DateSelector } from '@canakyuz/calendar';
export default function DateSelectorExample() {
const [selectedDate, setSelectedDate] = useState(new Date());
return (
onDateChange={setSelectedDate}
minimumDate={new Date(2023, 0, 1)} // 1 Ocak 2023
maximumDate={new Date(2023, 11, 31)} // 31 Aralık 2023
theme={{
backgroundColor: '#fff',
textColor: '#333'
}}
/>
);
}
`
#### DateSelector Props
| Prop | Tip | Varsayılan | Açıklama |
|------|-----|------------|----------|
| date | Date | Bugün | Seçili tarih |
| onDateChange | (date: Date) => void | - | Tarih değiştiğinde çalışacak fonksiyon |
| minimumDate | Date | - | Seçilebilecek minimum tarih |
| maximumDate | Date | - | Seçilebilecek maksimum tarih |
| theme | ThemeProps | {} | Seçici teması |
Calendar bileşenlerinin görünümünü özelleştirmek için theme prop'unu kullanabilirsiniz. Tema nesnesi aşağıdaki özellikleri destekler:
`jsx`
const theme = {
// Genel renkler
backgroundColor: '#ffffff', // Arka plan rengi
textColor: '#333333', // Metin rengi
// Başlık renkleri
headerBackgroundColor: '#f5f5f5', // Başlık arka plan rengi
headerTextColor: '#333333', // Başlık metin rengi
// Gün renkleri
selectedDayColor: '#3498db', // Seçili gün arka plan rengi
selectedDayTextColor: '#ffffff', // Seçili gün metin rengi
todayColor: '#e74c3c', // Bugünün rengi
dayTextColor: '#333333', // Gün metni rengi
dayBackgroundColor: '#ffffff', // Gün arka plan rengi
// Etkinlik renkleri
taskDefaultColor: '#3498db' // Varsayılan etkinlik rengi
};
Minimal mod, takvim bileşeninin sadece temel işlevselliğini sağlayarak daha hafif ve daha az yer kaplayan bir görünüm sunar. Bu mod, kendi UI tasarımınıza entegre etmek istediğinizde idealdir.
`jsx
import React from 'react';
import { View } from 'react-native';
import { Calendar } from '@canakyuz/calendar';
export default function MinimalCalendarExample() {
return (
view="weekly"
minimalMode={true} // Minimal modu aktifleştirir
compact={true} // Kompakt görünüm
showHeader={false} // Başlığı gizler
theme={{
backgroundColor: 'transparent',
textColor: '#333',
selectedDayColor: '#3498db',
selectedDayTextColor: '#ffffff',
todayColor: '#e74c3c',
dayTextColor: '#333333'
}}
renderDayContent={(date, events) => (
{events.length > 0 && (
)}
)}
/>
);
}
`
`jsx
import React from 'react';
import { View, Image } from 'react-native';
import { Calendar } from '@canakyuz/calendar';
import { Ionicons } from '@expo/vector-icons';
export default function CustomizedCalendarExample() {
return (
logoSource={require('./assets/my-logo.png')} // Özel logo
notificationIcon={
// veya
renderLogo={() => (
style={{ width: 30, height: 30 }}
resizeMode="contain"
/>
)}
renderNotification={() => (
)}
/>
);
}
`
`jsx
import React from 'react';
import { View, Text } from 'react-native';
import { Calendar } from '@canakyuz/calendar';
export default function CustomDayContentExample() {
return (
view="monthly"
minimalMode={true}
renderDayContent={(date, events) => (
alignItems: 'center',
backgroundColor: date.getDay() === 0 || date.getDay() === 6 ? '#f8f8f8' : '#fff', // Hafta sonları için farklı arka plan
borderRadius: 5
}}>
color: date.getDay() === 0 ? 'red' : date.getDay() === 6 ? 'blue' : '#333' // Pazar için kırmızı, Cumartesi için mavi
}}>
{date.getDate()}
{events.length > 0 && (
{events.slice(0, 2).map((event, index) => (
style={{
width: 8,
height: 2,
backgroundColor: event.color || '#3498db',
marginTop: 1
}}
/>
))}
{events.length > 2 && (
)}
)}
)}
/>
);
}
`
Yerel geliştirme için:
`bashBağımlılıkları yükleyin
npm install
$3
Projeye katkı sağlamak istiyorsanız:
`bash
Repoyu klonlayın
git clone https://github.com/canakyuz/calendar.gitProje dizinine gidin
cd calendarBağımlılıkları yükleyin
npm installGeliştirme sunucusunu başlatın
npm startDeğişikliklerinizi bir branch'te yapın
git checkout -b yeni-ozellikDeğişikliklerinizi commit edin
git commit -m "Yeni özellik: ..."Branch'inizi push edin
git push origin yeni-ozellik
`Paket Yayınlama
Bu paket npm'de yayınlanmaktadır. Yayınlama için aşağıdaki adımları izleyin:
$3
`bash
Versiyonu arttırın
npm version patch # Küçük güncellemeler için
npm version minor # Yeni özellikler için
npm version major # Büyük değişiklikler içinPaketi yayınlayın
npm publish
``Sorularınız için GitHub Issues veya aşağıdaki iletişim kanallarını kullanabilirsiniz:
- GitHub Issues
- Twitter: @canakyuz
- E-posta: canakyuz23@outlook.com
Şu anki versiyon: 1.0.7
Son güncelleme: Mart 2024
Bu proje MIT License altında lisanslanmıştır.
MIT lisansı, kullanıcıların yazılımı herhangi bir kısıtlama olmaksızın kullanma, kopyalama, değiştirme, birleştirme, yayınlama, dağıtma, alt lisanslama ve/veya satma hakkı tanıyan permisif bir lisanstır. Tek şartı, lisans ve telif hakkı bildiriminin yazılımın tüm kopyalarında veya önemli bölümlerinde bulundurulmasıdır.
Lisansın tam metnini LICENSE dosyasında bulabilirsiniz.