{"id":28919418,"url":"https://github.com/karllouise-code/calendar-scheduler","last_synced_at":"2026-05-05T00:34:03.005Z","repository":{"id":296330503,"uuid":"992996206","full_name":"Karllouise-code/calendar-scheduler","owner":"Karllouise-code","description":"Sinaing Scheduler , Vuejs, Firebase","archived":false,"fork":false,"pushed_at":"2025-06-20T06:20:24.000Z","size":426,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-20T07:32:00.267Z","etag":null,"topics":["firebase","javascript","vite","vuejs"],"latest_commit_sha":null,"homepage":"https://karlendaryo.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Karllouise-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-30T03:31:15.000Z","updated_at":"2025-06-20T06:20:27.000Z","dependencies_parsed_at":"2025-06-20T07:32:22.134Z","dependency_job_id":"882dcfd3-2435-4159-a499-d8c18f8e6898","html_url":"https://github.com/Karllouise-code/calendar-scheduler","commit_stats":null,"previous_names":["karllouise-code/calender-scheduler","karllouise-code/calendar-scheduler"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Karllouise-code/calendar-scheduler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Karllouise-code%2Fcalendar-scheduler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Karllouise-code%2Fcalendar-scheduler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Karllouise-code%2Fcalendar-scheduler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Karllouise-code%2Fcalendar-scheduler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Karllouise-code","download_url":"https://codeload.github.com/Karllouise-code/calendar-scheduler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Karllouise-code%2Fcalendar-scheduler/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261229094,"owners_count":23127555,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","javascript","vite","vuejs"],"created_at":"2025-06-22T03:08:54.362Z","updated_at":"2026-04-16T05:33:24.921Z","avatar_url":"https://github.com/Karllouise-code.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Karlendaryo | Sinaing Scheduler 🍚\n\nA Vue.js web application for scheduling names on a weekly calendar, designed for managing tasks or assignments on workdays (Monday–Friday). Built with Firebase Firestore for real-time data persistence, it allows users to add, edit, remove, and reorder names via a user-friendly interface, export schedules as CSV, and view events in a customizable calendar.\n\n🚀 **[Live Demo](https://karlendaryo.netlify.app/)** | 🐙 **Click the rice cooker logo to visit GitHub!**\n\n## ✨ Features\n\n### 📅 Interactive Calendar\n- **Multiple Views**: Month, week, and day format using FullCalendar\n- **Schedule Overview**: Starting from June 2, 2025\n- **Workday Focus**: Monday–Friday scheduling (perfect for office tasks!)\n\n### 👥 Name Management\n- **Add Names**: Simple modal input for new entries\n- **Edit Names**: Inline editing with intuitive controls\n- **Remove Names**: One-click removal with confirmation\n- **Drag \u0026 Drop**: Reorder names using vuedraggable for easy prioritization\n\n### ☁️ Real-time Data\n- **Firebase Integration**: Dual environment setup (development/production)\n- **Live Sync**: Changes reflect instantly across all users\n- **Data Persistence**: Never lose your scheduling data\n\n### 📊 Export \u0026 Sharing\n- **CSV Export**: Download schedules with title, day, and start date\n- **Structured Data**: Easy to import into other applications\n\n### 🎨 Modern UI/UX\n- **Responsive Design**: Built with Bootstrap for all device sizes\n- **Custom Styling**: Mali font and clean, professional appearance\n- **Bootstrap Icons**: Modern iconography throughout the interface\n- **Rice Cooker Theme**: Custom favicon and branding 🍚\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **Vue.js** (Vue CLI)\n- **FullCalendar** (Calendar component)\n- **Bootstrap** (UI framework)\n- **Bootstrap Icons** (Icon library)\n- **vuedraggable** (Drag \u0026 drop functionality)\n\n### Backend \u0026 Services\n- **Firebase Firestore** (Real-time database)\n\n### Development \u0026 Deployment\n- **Node.js** (Runtime environment)\n- **Netlify** (Hosting platform)\n- **GitHub** (Version control)\n\n### Styling\n- **Mali Font** (Custom typography)\n- **Custom CSS** (Tailored styling)\n\n## 📋 Prerequisites\n\nBefore you begin, ensure you have:\n\n- **Node.js** (v16 or v18 recommended)\n- **npm** package manager\n- **Firebase account** for Firestore setup\n- **Netlify account** for deployment\n- **GitHub account** for version control\n\n## 🚀 Project Setup\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/Karllouise-code/calender-scheduler.git\ncd calender-scheduler\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3. Firebase Configuration\n\n#### Create Firebase Projects\n\nCreate two Firebase projects for proper environment separation:\n\n1. **Development**: `calendar-scheduler-development`\n2. **Production**: `calendar-scheduler-5e1c7`\n\n#### Environment Variables\n\nCreate environment files in your project root:\n\n**`.env.development`**\n```env\nVUE_APP_FIREBASE_API_KEY=\u003cdev-api-key\u003e\nVUE_APP_FIREBASE_AUTH_DOMAIN=calendar-scheduler-development.firebaseapp.com\nVUE_APP_FIREBASE_PROJECT_ID=calendar-scheduler-development\nVUE_APP_FIREBASE_STORAGE_BUCKET=calendar-scheduler-development.firebasestorage.app\nVUE_APP_FIREBASE_MESSAGING_SENDER_ID=\u003cdev-messaging-sender-id\u003e\nVUE_APP_FIREBASE_APP_ID=\u003cdev-app-id\u003e\n```\n\n**`.env.production`**\n```env\nVUE_APP_FIREBASE_API_KEY=\u003cprod-api-key\u003e\nVUE_APP_FIREBASE_AUTH_DOMAIN=calendar-scheduler-5e1c7.firebaseapp.com\nVUE_APP_FIREBASE_PROJECT_ID=calendar-scheduler-5e1c7\nVUE_APP_FIREBASE_STORAGE_BUCKET=calendar-scheduler-5e1c7.firebasestorage.app\nVUE_APP_FIREBASE_MESSAGING_SENDER_ID=\u003cprod-messaging-sender-id\u003e\nVUE_APP_FIREBASE_APP_ID=\u003cprod-app-id\u003e\n```\n\n#### Update .gitignore\n\n```bash\necho \".env*\" \u003e\u003e .gitignore\n```\n\n#### Firestore Security Rules\n\n**Development Environment** (Open access for testing):\n```javascript\nrules_version = '2';\nservice cloud.firestore {\n  match /databases/{database}/documents {\n    match /{document=**} {\n      allow read, write: if true;\n    }\n  }\n}\n```\n\n**Production Environment** (Secure rules):\n```javascript\nrules_version = '2';\nservice cloud.firestore {\n  match /databases/{database}/documents {\n    match /names/{document=**} {\n      allow read: if true;\n      allow write: if request.resource.data.name is string \u0026\u0026\n                    request.resource.data.name.size() \u003c= 50 \u0026\u0026\n                    request.resource.data.createdAt is timestamp;\n    }\n  }\n}\n```\n\n## 💻 Development\n\n### Local Development\n\nRun the application locally with hot-reloading:\n\n```bash\nnpm run serve\n```\n\nVisit [http://localhost:8080](http://localhost:8080) to view the app (connected to development Firebase).\n\n### Production Build\n\nCompile and minify for production:\n\n```bash\nnpm run build\n```\n\nThis generates the `dist/` folder using the production Firebase project.\n\n### Code Linting\n\nLint and fix files:\n\n```bash\nnpm run lint\n```\n\n## 🌐 Deployment\n\n### Netlify Deployment\n\n1. **Push to GitHub**:\n   ```bash\n   git push origin main\n   ```\n\n2. **Configure Netlify**:\n   - Connect your GitHub repository\n   - **Build command**: `npm run build`\n   - **Publish directory**: `dist`\n   - **Environment variables**: Copy from `.env.development`\n\n3. **Deploy**: Use Netlify's UI to deploy\n\n4. **Verify**: Visit your Netlify URL to see the live application\n\n## 🎯 Usage\n\n### Managing Your Schedule\n\n#### Viewing the Calendar\n- Navigate between **month**, **week**, and **day** views\n- Check scheduled items (e.g., June 30: Lester Niel, July 1: Rio)\n- Use calendar controls to browse different time periods\n\n#### Managing Names\n1. **Add Names**: Click \"Add new name\" to open the management modal\n2. **Edit Names**: Use the pencil icon for inline editing\n3. **Remove Names**: Click the trash icon to delete entries\n4. **Reorder**: Drag and drop names to change priority\n5. **Save Changes**: Use the check icon to confirm changes\n\n#### Exporting Data\n- Click the download button to export as `schedule.csv`\n- File includes title, day, and start date information\n- Perfect for importing into other scheduling tools\n\n### Icon Reference\n- ✏️ **Pencil**: Edit name\n- 🗑️ **Trash**: Remove name  \n- 💾 **Download**: Save/Export\n- ✅ **Check**: Confirm changes\n- ❌ **Cancel**: Discard changes\n\n## 📁 Project Structure\n\n```\ncalender-scheduler/\n├── public/                     # Static files\n│   ├── rice-cooker_1530504.png # Custom favicon\n│   └── index.html              # Main HTML template\n├── src/                        # Vue.js source code\n│   ├── components/             # Vue components\n│   ├── views/                  # Page components\n│   ├── firebase/               # Firebase configuration\n│   ├── App.vue                 # Root component\n│   └── main.js                 # Application entry point\n├── .env.development            # Development environment variables\n├── .env.production             # Production environment variables\n├── package.json                # Dependencies and scripts\n├── vue.config.js               # Vue CLI configuration\n└── README.md                   # Project documentation\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Here's how to get started:\n\n1. **Fork** the repository\n2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)\n3. **Follow** Vue CLI conventions and coding standards\n4. **Commit** your changes (`git commit -m 'Add some amazing feature'`)\n5. **Push** to the branch (`git push origin feature/amazing-feature`)\n6. **Open** a Pull Request\n\n### Development Guidelines\n- Follow Vue.js best practices\n- Use Bootstrap classes for styling consistency\n- Test changes in both development and production environments\n- Update documentation for new features\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n**Firebase Connection Errors**\n- Verify environment variables are correctly set\n- Check Firestore security rules\n- Ensure Firebase projects are properly configured\n\n**Netlify Build Failures**\n- Review deploy logs in Netlify dashboard\n- Verify `dist/` folder is generated correctly\n- Check environment variables in Netlify settings\n\n**Security/Secrets Issues**\n- Share git-filter-repo error logs for assistance\n- Verify API keys are properly rotated\n- Check Firestore rules expiration dates\n\n### Getting Help\n- 🐙 **GitHub Issues**: [Report bugs or request features](https://github.com/Karllouise-code/calender-scheduler/issues)\n- 📧 **Email**: Contact through GitHub profile\n\n## 🙏 Acknowledgements\n\nSpecial thanks to the amazing open-source community:\n\n- **[Vue CLI](https://cli.vuejs.org/)** - Vue.js development tooling\n- **[Firebase](https://firebase.google.com/)** - Backend-as-a-Service platform\n- **[FullCalendar](https://fullcalendar.io/)** - JavaScript calendar library\n- **[Netlify](https://netlify.com/)** - Modern web deployment platform\n- **[Bootstrap Icons](https://icons.getbootstrap.com/)** - Beautiful icon library\n- **[vuedraggable](https://github.com/SortableJS/Vue.Draggable)** - Drag and drop functionality\n\n## 📄 License\n\nThis project is unlicensed and open for personal use. Feel free to fork, modify, and use for your own scheduling needs!\n\n---\n\nMade with ❤️ for better scheduling and 🍚 for the love of rice!\n\n**Happy Scheduling!** 📅✨","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarllouise-code%2Fcalendar-scheduler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkarllouise-code%2Fcalendar-scheduler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarllouise-code%2Fcalendar-scheduler/lists"}