Skip to content

Add Copy to Calendar integration with Full Calendar plugin#1140

Open
geetduggal wants to merge 25 commits into
obsidian-community:mainfrom
geetduggal:add-copy-to-calendar-feature
Open

Add Copy to Calendar integration with Full Calendar plugin#1140
geetduggal wants to merge 25 commits into
obsidian-community:mainfrom
geetduggal:add-copy-to-calendar-feature

Conversation

@geetduggal

@geetduggal geetduggal commented Jun 29, 2025

Copy link
Copy Markdown

Motivation

This feature bridges the gap between task management and calendar planning by allowing users to seamlessly copy Kanban cards to their calendar. The integration is motivated by the workflow of placing lists next to calendars and easily being able to add list items to calendars, as discussed in "Have You Been Using Your Calendar All Wrong?".

The core insight is that many productivity workflows benefit from the ability to:

  • Plan with lists (Kanban boards for organizing tasks and ideas)
  • Execute with calendars (time-blocked calendar events for actual work)
  • Bridge the gap between planning and execution seamlessly

This feature enables users to maintain their Kanban boards as planning and organization tools while easily moving actionable items to their calendar for time-blocked execution.

Technical Approach

Integration Design

The feature integrates with the Full Calendar plugin's "Full note" mode, which uses markdown files with frontmatter to represent calendar events. This approach was chosen because:

  • Native Obsidian integration: Uses standard markdown files that can be edited manually
  • Compatibility: Works with existing Full Calendar setups
  • Flexibility: Events can be easily modified after creation
  • Portability: Calendar data remains in readable markdown format

Implementation Details

Core Components

  1. Calendar Source Discovery: Reads Full Calendar plugin configuration from .obsidian/plugins/obsidian-full-calendar/data.json
  2. Calendar Picker UI: Displays available calendars with color-coded visual indicators
  3. Event Creation: Generates markdown files with appropriate frontmatter
  4. Settings Integration: Provides user control over feature availability

Event Format

Events are created as all-day events on the current day with the following frontmatter:

---
title: <sanitized-card-title>
allDay: true
date: YYYY-MM-DD
endDate: YYYY-MM-DD (next day)
completed: null
---

This format ensures compatibility with Full Calendar's expectations while providing a sensible default that can be easily adjusted within the calendar interface.

Edge Case Handling

The implementation includes robust handling for several edge cases:

Directory Path Handling:

  • Implements smart detection: checks if literal directory exists before treating eg./* as a wildcard
  • Provides fallback path normalization for characters that may cause filesystem issues

Error Recovery:

  • Graceful fallback for missing Full Calendar plugin
  • User-friendly error notifications with specific failure reasons
  • Robust file creation with collision detection
  • Automatic directory creation when needed

User Experience:

  • Integrates with existing context menu patterns
  • Respects platform differences (mobile vs desktop UI)
  • Maintains consistent icon and interaction patterns
  • Provides clear visual feedback for success/failure states

Settings Integration

  • Toggle Control: Users can enable/disable the feature via plugin settings
  • Documentation: Settings include explanation of requirements and configuration file location
  • Default State: Feature defaults to disabled to avoid confusion for users without Full Calendar plugin

Testing

Manual Testing Scenarios

Basic Functionality

  1. Setup: Install and configure Full Calendar plugin with at least one calendar source
  2. Enable Feature: Toggle "Enable Copy to Calendar" in Kanban plugin settings
  3. Basic Copy: Right-click on a Kanban card → "Copy to calendar" → Select calendar
  4. Verify: Confirm file creation in correct directory with proper frontmatter

Edge Cases

  1. Special Characters: Test with directories containing *, ?, <, >, |, :, ", \, /
  2. Wildcard Patterns: Test both /* wildcard configurations and literal /* directory names
  3. Missing Dependencies: Test behavior with Full Calendar plugin disabled/uninstalled
  4. Permission Issues: Test in directories with restricted write permissions
  5. File Collisions: Test duplicate card titles and filename collision handling

Platform Testing

  1. Mobile: Verify context menu integration on mobile devices
  2. Desktop: Confirm submenu behavior and keyboard navigation
  3. Cross-platform: Test consistent behavior across operating systems

Integration Testing

  1. Multiple Calendars: Test with various calendar configurations
  2. Calendar Types: Verify compatibility with different Full Calendar source types
  3. Existing Events: Confirm no interference with existing calendar functionality
  4. Plugin Reload: Test feature persistence across plugin reloads

- Add Copy to Calendar feature in card context menus
- Integrate with Full Calendar plugin's Full note mode
- Support for directory paths with special characters and wildcards
- Smart wildcard detection (literal /* vs wildcard patterns)
- Settings toggle to enable/disable the feature
- Comprehensive error handling and user feedback
- Cross-platform support (mobile and desktop UI)
- Documentation and translation support

Fixes edge cases with directories containing '*' characters by
implementing smart detection that checks for literal directory
existence before treating '/*' as a wildcard pattern.
- Add 'place-settings-at-beginning' setting to control settings placement
- Settings can now be placed after frontmatter instead of at end of file
- Parser now supports reading settings from both beginning and end
- Header settings take precedence if both locations exist
- Backward compatible: defaults to end placement (existing behavior)
- Useful for easier editing of board settings in markdown mode
@PhoenaVN

PhoenaVN commented Jul 2, 2025

Copy link
Copy Markdown

Hi. I'm interesting with your idea and wanna try it. But I can't find out "Enable Copy to Calendar" in Kanban plugin settings. Do you have any suggestions? Thanks a lot.
image

- Cards copied to calendars now show calendar color as background
- Smart text color calculation ensures optimal contrast (WCAG compliant)
- Card colors stored in board settings and persist across sessions
- Visual feedback provides immediate confirmation of calendar assignment
- Integrates seamlessly with existing Copy to Calendar workflow
- Backward compatible with existing color systems (tags, dates)
- Colors automatically update when cards are copied to different calendars
- CSS styling ensures proper text readability on any background color
@geetduggal geetduggal force-pushed the add-copy-to-calendar-feature branch from 248e6c0 to f16ede3 Compare July 7, 2025 05:42
- Add card-colors to StateManager compiled settings to ensure proper saving
- Update applyCalendarColorToCard to pass board directly instead of function
- Explicitly set shouldSave=true for card color state updates
- Add debug logging to track card color persistence
- Ensure card colors are saved to board settings JSON block
- Display colored circles next to calendar names in Copy to Calendar dropdown
- Circles match the calendar's configured color for easy identification
- Improved UX with hover effects and clean modern styling
- Visual consistency between picker colors and resulting card colors
- Responsive layout with proper spacing and alignment
- Replace DOM manipulation with Unicode emoji circles for calendar colors
- Implement smart color detection algorithm for RGB hex values
- Support for red 🔴, blue 🔵, green 🟢, yellow 🟡, purple 🟣, orange 🟠 circles
- Improved purple/magenta detection with better RGB analysis
- Clean up verbose debug logging across card color system
- Enhanced UX: users can visually identify calendars by color emoji
- Replace complex WCAG luminance with simpler perceived brightness calculation
- Increase threshold to favor black text over white (140 vs ~127)
- Default to black text for better consistency with Full Calendar display
- Card text colors now match Full Calendar event text colors
- Better visual consistency between Kanban cards and calendar events
@geetduggal

Copy link
Copy Markdown
Author

Hi @PhoenaVN I added the setting as a part of this PR, and it looks like this when I test it on my setup:

image

I'm not sure it makes sense to make a part of the official Kanban plugin, which I absolutely adore, but maybe @mgmeyers has some thoughts there. Thanks in advance for your consideration! (I'd imagine some sort of squash-merge of this PR)

I've been using the feature for the last couple of weeks and it's been quite handy to be able to copy cards over to my calendar. Feels like a low-key superpower to keep my mind organized by linking lists in a kanban view with time.

🎉 Major Plugin Evolution: Kanban → Kanban Plus

## 🚀 New Features

### 🔗 Cross-File Card Movement
- Associate multiple Kanban files with any board through board settings
- Move cards between different files seamlessly via 'Move to file' option
- Smart metadata injection - automatically adds kanban metadata to associated files
- Intuitive file picker with search functionality
- Cards display as '<file-basename/list-name>' in move menu

### 📅 Enhanced Calendar Integration
- Existing 'Copy to calendar' feature with Full Calendar integration
- Visual color feedback - cards show calendar colors automatically
- Smart text contrast algorithm for optimal readability
- Emoji color indicators (🔴🔵🟢🟡🟣🟠) in calendar picker
- Persistent card colors across file reloads and device sync

### ⚙️ Advanced Board Configuration
- Board settings can be placed at file beginning for quick editing
- Associated files management through clean UI interface
- Settings hierarchy: Global → Board → Card level inheritance

## 🛠️ Technical Implementation

### Plugin Identity
- Updated manifest.json: id='kanban-plus', name='Kanban Plus'
- Version reset to 1.0.0 for new plugin lifecycle
- Updated package.json and branding throughout

### Core Architecture
- Extended KanbanSettings interface with 'associated-files' array
- Enhanced ItemMenu with cross-file move options
- FileSelectionModal for intuitive file selection
- StateManager compilation includes associated files settings
- Auto-injection of kanban metadata to linked files

### UI/UX Enhancements
- Board-specific settings section for file associations
- File picker with real-time search filtering
- Clean removal of associated files with confirmation
- Responsive design for mobile and desktop
- Modern CSS styling with proper contrast and hover states

### Data Safety
- Non-destructive file operations
- Atomic card movements between files
- Proper error handling with console logging
- Backward compatibility with existing boards

## 📋 Files Modified

- manifest.json - Plugin identity and metadata
- package.json - Package configuration
- README.md - Comprehensive documentation
- src/Settings.ts - Associated files UI and management
- src/StateManager.ts - Settings compilation
- src/components/Item/ItemMenu.ts - Cross-file move functionality
- src/lang/locale/en.ts - Localization strings
- src/styles.less - File picker and settings styling

## 🎯 Use Cases Enabled

### Project Management
- Main project board → Sub-project boards
- Cross-promotion of tasks between project phases
- Unified workflow management across multiple files

### Content Creation
- Ideas → Writing → Publishing pipeline
- Cross-board task promotion and workflow
- Calendar integration for deadlines and scheduling

### Personal Productivity
- Inbox → Weekly → Project board workflows
- GTD-style task processing between contexts
- Time-blocked scheduling with calendar sync

## �� Testing Recommendations

1. Create multiple Kanban files
2. Associate them through board settings
3. Test cross-file card movement
4. Verify metadata injection works
5. Test calendar integration with colors
6. Verify settings persistence across reloads

Ready for community plugin submission! 🚀
- Detailed feature breakdown for community plugin submission
- Cross-file card movement workflows and use cases
- Advanced calendar integration capabilities
- Technical architecture and data models
- Real-world workflow examples
- Getting started guide and troubleshooting
- Ready for Obsidian community plugin directory
- Fixed async function in synchronous menu building context
- Changed approach: show 'File →' items that load lanes on click
- Removed problematic setTimeout and async menu population
- Menu now builds synchronously but loads file data on demand
- Clicking associated file item shows submenu with actual lanes
- Maintains performance while fixing functionality
- Replace StateManager approach with direct file content manipulation
- Read target file, find H2 header for target lane, insert card as markdown
- Maintain checkbox state ([x] or [ ]) when moving cards
- Remove card from source board after successful target insertion
- Much more reliable than complex StateManager creation
- Clear debug logging for troubleshooting

This fixes the issue where cards couldn't actually move to associated files
even though the menu options appeared correctly.
- Changed from 'TH13 →' clickable items to proper nested submenus
- Move to list now shows: Current lanes + File submenus (TH13, etc.)
- Hovering over file names shows their lanes as nested submenus
- Uses setTimeout(0) to populate submenus asynchronously after creation
- Much cleaner UX following standard menu design patterns
- Menu structure: Move to list > TH13 > Inbox/Done/etc.

This provides the requested hierarchical menu experience where users
can hover over associated file names to see their available lanes.
- Use stateManager.app.vault.cachedRead() instead of setTimeout approach
- Create submenu structure immediately when menu is built
- Populate submenus with file content using faster cached reading
- Should properly show TH13 submenu under Move to list
- Eliminates async timing issues with menu building
- Provides better debugging output for submenu creation

This should finally show the nested TH13 submenu structure correctly.
- Changed from nested submenu approach to separate top-level menu items
- Now shows: 'Move to list' (current board) + 'Move to list (TH13)' etc.
- Each associated file gets its own dedicated menu item with submenu
- User can directly see 'Move to list (FileName)' without nesting
- Cleaner UX with clear file separation at top level
- Maintains all existing functionality for card movement

This matches the user's specific request for separate menu items
rather than nested submenus under the main 'Move to list'.
The problem was that submenus were being created immediately, but lanes
were added asynchronously via .then() callbacks. By the time the user
hovers over the submenu, it's already 'frozen' and async content doesn't
get added properly.

Changes:
- Made addAssociatedFileMenus async to pre-load all file content first
- Read file content with await before creating menu items
- Create submenu items only after we have the lane data
- Use setTimeout(0) to avoid blocking the main menu creation
- Add comprehensive error handling for file reading failures

This ensures 'Move to list (TH13)' submenu shows 'Inbox' immediately
when hovered over, since the content is pre-loaded synchronously.
The setTimeout approach was fundamentally broken because in Obsidian's
menu system, once a menu is shown you cannot add new items to it.

The setTimeout was causing associated file menu items to be added
AFTER the menu was already displayed to the user, making them invisible.

Changes:
- Made useCallback async to allow awaiting file operations
- Removed setTimeout wrapper around addAssociatedFileMenus()
- Now await addAssociatedFileMenus(menu) before showing menu
- Menu only appears after all items (including associated files) are loaded

This ensures 'Move to list (TH13)' appears immediately when the menu opens,
since all file content is pre-loaded before menu display.
The menu structure now shows separate top-level items:
- 'Move to list' for current board
- 'Move to list (filename)' for each associated file

This accurately reflects the working implementation after the
async menu loading fixes.
This file was for the original PR approach to the Kanban plugin.
Since we've pivoted to creating 'Kanban Plus' as a standalone
community plugin, the PR description is no longer relevant.

All documentation is now in README.md, FEATURES.md, and
CALENDAR_COLOR_FEATURE.md which properly reflect the community
plugin approach.
BREAKING CHANGE: Card colors now determined by hashtags matching calendar names

Features:
- �� Cards automatically show calendar colors when they contain matching hashtags
- 🏷️ Copy to calendar automatically adds hashtag if missing (e.g., #Work)
- 🔄 Real-time color updates based on hashtag changes
- 📊 Zero configuration - reads directly from Full Calendar plugin
- 🎯 First matching hashtag determines card color (case-insensitive)
- ⚡ No storage overhead - colors calculated dynamically

Technical Changes:
- Remove card-colors from Settings interface and StateManager
- Replace stored color lookup with hashtag parsing and calendar matching
- Update getCardColorFn to parse hashtags and match against Full Calendar data
- Modify createCalendarEvent to add hashtags instead of storing colors
- Enhanced addCalendarHashtagToCard function with smart hashtag addition
- Updated all documentation to reflect hashtag-based approach

Benefits:
- Simpler data model - no persistent color storage
- Always synchronized with Full Calendar settings
- More intuitive user experience with hashtag workflow
- Better performance - no settings block updates needed
- Cleaner markdown files with no color metadata

Migration: Existing card-colors settings will be ignored, cards need hashtags for colors
IMPROVEMENT: Clean calendar event file organization

- Strip hashtags from calendar event filenames to avoid clutter
- Calendar events now have clean names like 2025-02-27 Meeting with client.md
- Card keeps original hashtags for color association
- Added whitespace normalization after hashtag removal
- Enhanced function documentation with hashtag handling details

Benefits:
- Cleaner calendar file organization
- No hashtag noise in Full Calendar event titles
- Original card functionality preserved
- Better file naming consistency
DOCUMENTATION: Comprehensive README overhaul

Major changes:
- Clearly position Kanban Plus as feature-enhanced fork of original Kanban
- Emphasize 100% compatibility and sync strategy with upstream
- Distinguish Kanban Plus exclusive features from original functionality
- Add respectful acknowledgment of original plugin and maintainer
- Provide contribution guidelines for fork relationship
- Explain zero breaking changes philosophy

New sections:
- 🔄 About This Fork - explains relationship and sync strategy
- 🆕 Enhanced Features Beyond the Original - clearly marked exclusive features
- 🔄 All Original Kanban Features Included - emphasizes completeness
- 🫡 Standing on the Shoulders of Giants - proper attribution
- 🤝 Relationship with Original Plugin - respectful collaboration
- 🔀 Contribution Guidelines - upstream collaboration guidance
- 🚀 Sync with Upstream - community contribution approach

Benefits:
- Clear value proposition for users choosing between plugins
- Transparent about enhanced vs original features
- Respectful relationship with original project
- Guidance for contributors on where to submit improvements
- Professional presentation for community plugin submission
DOCUMENTATION: Streamlined and focused README

Changes:
- Remove cheesy '(Kanban Plus Exclusive)' labels from all features
- Simplify marketing language to be more direct and to-the-point
- Remove excessive bold formatting from feature lists
- Add AI-powered development section explaining maintenance approach
- Simplify section headers and descriptions
- Clean up acknowledgments section to be more concise
- Remove flowery closing statements

Benefits:
- More professional and focused presentation
- Clear information without marketing fluff
- Transparent about AI-assisted development approach
- Better readability and scanning
- Appropriate tone for technical documentation
DOCUMENTATION: Explain why Kanban plugin was chosen to fork

Added 'Why Fork Kanban (Not Bases)?' section explaining:

- Recognition of other Kanban solutions in Obsidian community (Bases, etc.)
- Primary reason: simple bulleted list representation in plain text
- Philosophy: complete workflow from quick capture to advanced project management
- Benefits of plain text approach (future-proof, version control, compatibility)
- How enhanced features align with this philosophy

Added links to Medium posts:
- Tech Habits: Lists in Obsidian Kanban vs. Obsidian Bases (July 26, 2025)
- Tech Habits: Obsidian Kanban and Full Calendar Integration (June 29, 2025)
- Have You Been Using Your Calendar All Wrong? (June 20, 2025)

Benefits:
- Clear rationale for technical choices
- Positions plugin in competitive landscape
- Links to detailed explanations
- Explains philosophy behind enhanced features
- Demonstrates thought leadership in productivity space

Note: Placeholder URLs used for first two Medium posts - need actual URLs
CORRECTION: Clarify Bases doesn't currently have Kanban functionality

Fixed wording that incorrectly implied Bases currently offers Kanban solutions.
Updated to accurately state that Bases:
- Shows great potential for future Kanban support
- Doesn't currently offer Kanban boards or user-ordered lists

This aligns with the discussion in the referenced Medium posts and provides
accurate information about the current Obsidian plugin landscape.
@Ravenclawer

Copy link
Copy Markdown

This is amazing, could you release it , we don't know how to install it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants