Programme Calendar Builder Widget Demo

📋 Live Demo

Try out the calendar functionality! Create programmes and schedule activities across the year.

🚀 Quick Test Instructions

Enter your email and get a login code
Create a programme (e.g., "My Social Year")
Create some activities in the Activities tab
Click "Calendar" button on your programme
Schedule activities by month and day!

📦 Embed Code

Copy this code to embed the widget on your website using our GTM-like approach:

🚀 GTM-like Loading Benefits

Faster Page Load: Small loader script loads first, main widget loads asynchronously
Non-blocking: Your page renders immediately, widget loads in background
Error Handling: Graceful fallback if widget fails to load
Easy Configuration: Set config before loading, just like Google Tag Manager
Version Control: Easy to update widget version without changing embed code

                        HTML
                        
                    
<!-- Add the container element -->
<divid="programme-builder-widget"></div>

<!-- Configure the widget (GTM-like approach) -->
<script>
window.ProgrammeBuilderConfig = {
    containerId: 'programme-builder-widget',
    apiUrl: 'https://platform.turbsite.co.uk',
    instanceId: 'your-instance-id',
    theme: 'light',
    autoInit: true,
    debug: false
};
</script>

<!-- Load the widget dynamically (GTM-like) -->
<scriptsrc="https://turbsite.co.uk/widget.js"></script>
                

⚙️ Configuration Examples

Here are some common configuration options:

Basic Setup (GTM-like)

<script>
window.ProgrammeBuilderConfig = {
  containerId: 'my-widget',
  apiUrl: 'https://platform.turbosite.co.uk',
  instanceId: 'your-instance-id'
};
</script>
<script src="https://turbosite.co.uk/widget.js"></script>

Dark Theme

<script>
window.ProgrammeBuilderConfig = {
  containerId: 'my-widget',
  apiUrl: 'https://platform.turbosite.co.uk',
  instanceId: 'your-instance-id',
  theme: 'dark'
};
</script>
<script src="https://turbosite.co.uk/widget.js"></script>

With Debug Mode

<script>
window.ProgrammeBuilderConfig = {
  containerId: 'my-widget',
  apiUrl: 'https://platform.turbosite.co.uk',
  instanceId: 'your-instance-id',
  debug: true
};
</script>
<script src="https://turbosite.co.uk/widget.js"></script>

Custom Styling

<script>
window.ProgrammeBuilderConfig = {
  containerId: 'my-widget',
  apiUrl: 'https://platform.turbosite.co.uk',
  instanceId: 'your-instance-id',
  customStyles: {
    primaryColor: '#ff6b6b',
    borderRadius: '12px'
  }
};
</script>
<script src="https://turbosite.co.uk/widget.js"></script>

🔧 Configuration Options

The widget accepts the following configuration options:

apiUrl: Your API endpoint URL (default: 'https://platform.turbsite.co.uk')
instanceId: Your organization/instance ID for multi-tenant support (required)
containerId: ID of the container element (default: 'programme-builder-widget')
theme: Theme: 'light' or 'dark' (default: 'light')
autoInit: Auto-initialize on page load (default: true)
debug: Enable debug logging (default: false)
customStyles: Object with custom CSS variables for theming
onReady: Callback function called when widget is ready
onLogin: Callback function called when user logs in
onLogout: Callback function called when user logs out

🌟 Features

🔐 Passwordless Login
Secure email-based authentication with 7-digit verification codes

🗓️ Calendar Builder
Schedule activities across April-March year

📋 Programme Management
Create, edit, and delete programmes with calendar integration

🎯 Activity Scheduling
Schedule activities by month and day with notes

📱 Responsive Design
Calendar works perfectly on all devices

⚡ Real-time Updates
Instant calendar synchronization with the API

🔧 Easy Integration
Simple to embed in any website

🎨 Customizable Themes
Light and dark themes with custom styling options

🔍 Debug Mode
Built-in debugging tools for development

📅 Programme Calendar Builder Widget