How to Integrate a TimeTime Booking Calendar into Your Website

Integrating a booking calendar into your website can transform user experience, streamline scheduling operations, and automate your entire reservation process. This guide provides detailed steps for integrating TimeTime's advanced booking system into your website, empowering you with enterprise-grade scheduling capabilities.

Step 1: Set Up Your TimeTime Account

Before you begin integration, you'll need to:

Create a TimeTime Account: Sign up at TimeTime.in and set up your profile.
Configure Your Services: Define the services or appointment types you want to offer through your booking calendar.
Set Availability Rules: Configure your working hours, breaks, and other availability parameters.
Create Resources (if needed): Define any resources required for bookings, such as rooms, equipment, or staff members.

Step 2: Obtain Your API Credentials

To interact with TimeTime's API, you'll need to generate API keys:

Log in to your TimeTime dashboard.
Navigate to the "Developers" section at https://app.timetime.in/dashboard/profile/developers.
Click on "Generate New API Key."
Store this key securely—it provides access to your TimeTime account and should be protected.

Step 3: Set Up Your Development Environment

Prepare your development environment to work with TimeTime's API:

# For Node.js projects
npm init -y
npm install axios

Create a configuration file to store your API credentials securely:

// config.js
module.exports = {
  timeTimeApiKey: 'YOUR_API_KEY',
  baseUrl: 'https://api.timetime.in/v1'
};

Step 4: Authenticate API Requests

All TimeTime API requests require authentication using your API key:

const axios = require('axios');
const config = require('./config');

// Create an API client with authentication
const timeTimeClient = axios.create({
  baseURL: config.baseUrl,
  headers: {
    'Authorization': `Bearer ${config.timeTimeApiKey}`,
    'Content-Type': 'application/json'
  }
});

// Example: Get user profile
async function getUserProfile() {
  try {
    const response = await timeTimeClient.get('/me');
    return response.data;
  } catch (error) {
    console.error('Error fetching user profile:', error.message);
    throw error;
  }
}

Step 5: Implement Event Type Listing

The first step in building your booking interface is fetching and displaying available event types (bookable services):

// Server-side code to fetch event types
async function getEventTypes() {
  try {
    const response = await timeTimeClient.get('/event-types');
    return response.data;
  } catch (error) {
    console.error('Error fetching event types:', error.message);
    throw error;
  }
}

// Example Express route
app.get('/booking/services', async (req, res) => {
  try {
    const eventTypes = await getEventTypes();
    res.render('booking-services', { eventTypes });
  } catch (error) {
    res.status(500).send('Error loading services');
  }
});

Client-side rendering example:

<div class="service-list">
  <h2>Available Services</h2>
  <div class="services">
    {{#each eventTypes}}
      <div class="service-card" data-id="{{id}}">
        <h3>{{name}}</h3>
        <p>{{description}}</p>
        <p class="duration">Duration: {{formatDuration duration}}</p>
        <button onclick="checkAvailability('{{id}}')">Book Now</button>
      </div>
    {{/each}}
  </div>
</div>

Step 6: Check Availability and Display a Calendar

When a user selects a service, you'll need to check available time slots:

// Server-side function to check availability
async function getAvailability(eventTypeId, startDate, endDate) {
  try {
    const response = await timeTimeClient.get(`/event-types/${eventTypeId}/availability`, {
      params: {
        startTime: startDate, // Format: YYYY-MM-DD
        endTime: endDate      // Format: YYYY-MM-DD
      }
    });
    return response.data;
  } catch (error) {
    console.error('Error fetching availability:', error.message);
    throw error;
  }
}

// Express route
app.get('/booking/availability/:eventTypeId', async (req, res) => {
  try {
    // Calculate default date range (e.g., next 7 days)
    const startDate = new Date().toISOString().split('T')[0];
    const endDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
    
    const availability = await getAvailability(
      req.params.eventTypeId,
      startDate,
      endDate
    );
    
    res.render('booking-calendar', { 
      eventTypeId: req.params.eventTypeId,
      availability,
      startDate,
      endDate
    });
  } catch (error) {
    res.status(500).send('Error loading availability');
  }
});

Client-side calendar implementation:

// Simplified client-side code to render availability
function renderCalendar(availability) {
  const calendarEl = document.getElementById('booking-calendar');
  
  // Group availability by date
  const availabilityByDate = {};
  availability.forEach(slot => {
    const date = slot.startTime.split('T')[0];
    if (!availabilityByDate[date]) {
      availabilityByDate[date] = [];
    }
    availabilityByDate[date].push(slot);
  });
  
  // For each date, render available time slots
  Object.keys(availabilityByDate).forEach(date => {
    const dateEl = document.createElement('div');
    dateEl.className = 'calendar-date';
    dateEl.innerHTML = `<h3>${formatDate(date)}</h3>`;
    
    const slotsContainer = document.createElement('div');
    slotsContainer.className = 'time-slots';
    
    availabilityByDate[date].forEach(slot => {
      const slotEl = document.createElement('button');
      slotEl.className = 'time-slot';
      slotEl.textContent = formatTime(slot.startTime);
      slotEl.onclick = () => selectTimeSlot(slot);
      slotsContainer.appendChild(slotEl);
    });
    
    dateEl.appendChild(slotsContainer);
    calendarEl.appendChild(dateEl);
  });
}

Step 7: Handle Booking Creation

When a user selects a time slot, you'll need to collect their information and create a booking:

// Server-side function to create a booking
async function createBooking(eventTypeId, startTime, endTime, customer) {
  try {
    const response = await timeTimeClient.post('/bookings', {
      eventTypeId,
      startTime,
      endTime,
      customer: {
        name: customer.name,
        email: customer.email,
        phone: customer.phone
      },
      // Include any additional fields required by your setup
    });
    return response.data;
  } catch (error) {
    console.error('Error creating booking:', error.message);
    throw error;
  }
}

// Express route for booking creation
app.post('/booking/create', async (req, res) => {
  try {
    const booking = await createBooking(
      req.body.eventTypeId,
      req.body.startTime,
      req.body.endTime,
      {
        name: req.body.name,
        email: req.body.email,
        phone: req.body.phone
      }
    );
    
    // Redirect to confirmation page
    res.redirect(`/booking/confirmation/${booking.id}`);
  } catch (error) {
    res.status(500).send('Error creating booking: ' + error.message);
  }
});

Booking form example:

<form id="booking-form" action="/booking/create" method="post">
  <input type="hidden" name="eventTypeId" value="{{eventTypeId}}">
  <input type="hidden" name="startTime" id="startTime">
  <input type="hidden" name="endTime" id="endTime">
  
  <div class="form-group">
    <label for="name">Your Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div class="form-group">
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div class="form-group">
    <label for="phone">Phone Number</label>
    <input type="tel" id="phone" name="phone">
  </div>
  
  <button type="submit" class="submit-button">Complete Booking</button>
</form>

Step 8: Display Booking Confirmation

After a successful booking, show a confirmation page with booking details:

// Express route for confirmation
app.get('/booking/confirmation/:bookingId', async (req, res) => {
  try {
    const booking = await timeTimeClient.get(`/bookings/${req.params.bookingId}`);
    res.render('booking-confirmation', { booking: booking.data });
  } catch (error) {
    res.status(500).send('Error loading booking details');
  }
});

Step 9: Implement Booking Management (Optional)

Allow customers to manage their bookings with features like:

Rescheduling appointments
Canceling bookings
Setting up reminders

// Example: Cancel a booking
async function cancelBooking(bookingId) {
  try {
    await timeTimeClient.post(`/bookings/${bookingId}/cancellation`);
    return { success: true };
  } catch (error) {
    console.error('Error canceling booking:', error.message);
    throw error;
  }
}

Step 10: Customize the Appearance (Optional)

Style your booking calendar to match your website's design:

.booking-container {
  font-family: 'Roboto', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.time-slot {
  background-color: #f0f7ff;
  border: 1px solid #cce4ff;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.time-slot:hover {
  background-color: #e0f0ff;
}

.time-slot.selected {
  background-color: #007bff;
  color: white;
}

Conclusion

Integrating TimeTime's booking calendar into your website provides a professional scheduling experience for your customers while automating your booking processes. This integration allows you to leverage TimeTime's powerful features such as resource management, time zone handling, and customizable booking workflows.

For more detailed API documentation and advanced integration options, visit the TimeTime Developer Documentation.

Step 1: Set Up Your TimeTime Account​

Step 2: Obtain Your API Credentials​

Step 3: Set Up Your Development Environment​

Step 4: Authenticate API Requests​

Step 5: Implement Event Type Listing​

Step 6: Check Availability and Display a Calendar​

Step 7: Handle Booking Creation​

Step 8: Display Booking Confirmation​

Step 9: Implement Booking Management (Optional)​

Step 10: Customize the Appearance (Optional)​

Conclusion​