or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-parser.mdcomponents.mddesign-system.mdduration.mdevents.mdhelpers.mdindex.mdparsing.mdperiod-binary.mdproperties.mdrecurrence.mdtime.mdtimezone.mdvcard-time.md
tile.json

components.mddocs/

Component Manipulation

Structured access to iCalendar and vCard components providing high-level methods for adding, removing, and querying properties and subcomponents. The Component class wraps jCal component data and provides convenience methods for manipulation.

Capabilities

Component Class

Wraps a jCal component, adding convenience methods to add, remove and update subcomponents and properties.

/**
 * Component constructor
 * @param {Array|string} jCal - Raw jCal component data OR name of new component
 * @param {ICAL.Component} parent - Parent component to associate (optional)
 */
class ICAL.Component {
  constructor(jCal, parent);
  
  // Properties
  readonly name: string;          // Component name (e.g., 'vcalendar', 'vevent')
  jCal: Array;                   // Raw jCal representation
  parent: ICAL.Component;        // Parent component (if any)
}

Usage Examples:

const ICAL = require('ical.js');

// Create a new component by name
const vcalendar = new ICAL.Component('vcalendar');

// Create component from parsed jCal data
const icalString = 'BEGIN:VCALENDAR\nVERSION:2.0\nEND:VCALENDAR';
const jcalData = ICAL.parse(icalString);
const component = new ICAL.Component(jcalData);

console.log(component.name); // 'vcalendar'

Static Methods

/**
 * Parse iCalendar string and create Component
 * @param {string} str - iCalendar string to parse
 * @returns {ICAL.Component} Parsed component
 * @throws {ICAL.parse.ParserError} On parse errors
 */
static fromString(str);

Usage Examples:

const ICAL = require('ical.js');

const icalString = `BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Test//Test//EN
BEGIN:VEVENT
UID:test@example.com
SUMMARY:Test Event
END:VEVENT
END:VCALENDAR`;

const component = ICAL.Component.fromString(icalString);
console.log(component.name); // 'vcalendar'

const event = component.getFirstSubcomponent('vevent');
console.log(event.getFirstPropertyValue('summary')); // 'Test Event'

Subcomponent Methods

Methods for managing nested components.

/**
 * Get all subcomponents, optionally filtered by name
 * @param {string} name - Component name to filter by (optional)
 * @returns {ICAL.Component[]} Array of subcomponents
 */
getAllSubcomponents(name);

/**
 * Get the first subcomponent with the given name
 * @param {string} name - Component name to find
 * @returns {ICAL.Component|null} First matching subcomponent or null
 */
getFirstSubcomponent(name);

/**
 * Add a subcomponent
 * @param {ICAL.Component} component - Subcomponent to add
 * @returns {ICAL.Component} The added component
 */
addSubcomponent(component);

/**
 * Remove a subcomponent
 * @param {ICAL.Component} component - Subcomponent to remove
 * @returns {boolean} True if component was found and removed
 */
removeSubcomponent(component);

/**
 * Remove all subcomponents with the given name
 * @param {string} name - Component name to remove
 */
removeAllSubcomponents(name);

Usage Examples:

const ICAL = require('ical.js');

const vcalendar = new ICAL.Component('vcalendar');

// Create and add an event
const vevent = new ICAL.Component('vevent');
vevent.addProperty(new ICAL.Property('uid', 'test@example.com'));
vevent.addProperty(new ICAL.Property('summary', 'Test Event'));

vcalendar.addSubcomponent(vevent);

// Get all events
const events = vcalendar.getAllSubcomponents('vevent');
console.log(events.length); // 1

// Get first event
const firstEvent = vcalendar.getFirstSubcomponent('vevent');
console.log(firstEvent.getFirstPropertyValue('summary')); // 'Test Event'

// Remove the event
vcalendar.removeSubcomponent(vevent);
console.log(vcalendar.getAllSubcomponents('vevent').length); // 0

Property Methods

Methods for managing component properties.

/**
 * Get all properties, optionally filtered by name
 * @param {string} name - Property name to filter by (optional)
 * @returns {ICAL.Property[]} Array of properties
 */
getAllProperties(name);

/**
 * Get the first property with the given name
 * @param {string} name - Property name to find
 * @returns {ICAL.Property|null} First matching property or null
 */
getFirstProperty(name);

/**
 * Get the value of the first property with the given name
 * @param {string} name - Property name to find
 * @returns {any} Property value or null if not found
 */
getFirstPropertyValue(name);

/**
 * Add a property
 * @param {ICAL.Property} property - Property to add
 * @returns {ICAL.Property} The added property
 */
addProperty(property);

/**
 * Add property with name and value (creates ICAL.Property internally)
 * @param {string} name - Property name
 * @param {any} value - Property value
 * @returns {ICAL.Property} The created and added property
 */
addPropertyWithValue(name, value);

/**
 * Update or create property with given value
 * @param {string} name - Property name
 * @param {any} value - New property value
 * @returns {ICAL.Property} The updated or created property
 */
updatePropertyWithValue(name, value);

/**
 * Remove a property
 * @param {ICAL.Property} property - Property to remove
 * @returns {boolean} True if property was found and removed
 */
removeProperty(property);

/**
 * Remove all properties with the given name
 * @param {string} name - Property name to remove
 */
removeAllProperties(name);

/**
 * Check if component has a property with the given name
 * @param {string} name - Property name to check
 * @returns {boolean} True if property exists
 */
hasProperty(name);

Usage Examples:

const ICAL = require('ical.js');

const vevent = new ICAL.Component('vevent');

// Add properties
vevent.addPropertyWithValue('uid', 'test@example.com');
vevent.addPropertyWithValue('summary', 'Team Meeting');
vevent.addPropertyWithValue('dtstart', '2023-06-15T10:00:00Z');

// Get property values
console.log(vevent.getFirstPropertyValue('summary')); // 'Team Meeting'

// Check if property exists
console.log(vevent.hasProperty('dtstart')); // true
console.log(vevent.hasProperty('dtend')); // false

// Get all properties
const allProps = vevent.getAllProperties();
console.log(allProps.length); // 3

// Get properties by name
const summaryProps = vevent.getAllProperties('summary');
console.log(summaryProps.length); // 1

// Update property
vevent.updatePropertyWithValue('summary', 'Updated Meeting Title');
console.log(vevent.getFirstPropertyValue('summary')); // 'Updated Meeting Title'

// Remove property by name
vevent.removeAllProperties('summary');
console.log(vevent.hasProperty('summary')); // false

Serialization Methods

/**
 * Serialize component to iCalendar string
 * @returns {string} Component as iCalendar string
 */
toString();

/**
 * Get component as jCal array
 * @returns {Array} Component in jCal format
 */
toJSON();

Usage Examples:

const ICAL = require('ical.js');

const vcalendar = new ICAL.Component('vcalendar');
vcalendar.addPropertyWithValue('version', '2.0');
vcalendar.addPropertyWithValue('prodid', '-//Test//Test//EN');

const vevent = new ICAL.Component('vevent');
vevent.addPropertyWithValue('uid', 'test@example.com');
vevent.addPropertyWithValue('summary', 'Test Event');
vcalendar.addSubcomponent(vevent);

// Serialize to string
const icalString = vcalendar.toString();
console.log(icalString);
// Output:
// BEGIN:VCALENDAR
// VERSION:2.0
// PRODID:-//Test//Test//EN
// BEGIN:VEVENT
// UID:test@example.com
// SUMMARY:Test Event
// END:VEVENT
// END:VCALENDAR

// Get as jCal array
const jcalData = vcalendar.toJSON();
console.log(jcalData[0]); // 'vcalendar'

Component Helpers

Utility methods for common component operations.

/**
 * Get design set for this component
 * @returns {Object} Design set object
 * @private
 */
get _designSet();

/**
 * Clone the component
 * @returns {ICAL.Component} Cloned component
 */
clone();

Iterator Support

/**
 * Get property iterator for efficient traversal
 * @param {string} name - Property name to iterate (optional)
 * @returns {Object} Iterator object
 */
getPropertyIterator(name);

/**
 * Get component iterator for efficient traversal
 * @param {string} name - Component name to iterate (optional)
 * @returns {Object} Iterator object
 */
getComponentIterator(name);

Iterator Usage Examples:

const ICAL = require('ical.js');

const component = ICAL.Component.fromString(icalString);

// Iterate through all properties
const propIterator = component.getPropertyIterator();
let property;
while ((property = propIterator.next())) {
  console.log(`${property.name}: ${property.getFirstValue()}`);
}

// Iterate through specific property type
const dtIterator = component.getPropertyIterator('dtstart');
while ((property = dtIterator.next())) {
  console.log('Start time:', property.getFirstValue());
}

// Iterate through subcomponents
const compIterator = component.getComponentIterator('vevent');
let subcomponent;
while ((subcomponent = compIterator.next())) {
  console.log('Event:', subcomponent.getFirstPropertyValue('summary'));
}

Common Component Types

VCALENDAR Components

Top-level iCalendar container component.

Required Properties:

  • VERSION
    - iCalendar version (typically "2.0")
  • PRODID
    - Product identifier

Common Subcomponents:

  • VEVENT
    - Calendar events
  • VTODO
    - Todo items
  • VJOURNAL
    - Journal entries
  • VTIMEZONE
    - Timezone definitions

VEVENT Components

Calendar event components.

Required Properties:

  • UID
    - Unique identifier
  • DTSTART
    - Start date/time

Common Properties:

  • SUMMARY
    - Event title
  • DTEND
    or
    DURATION
    - End time or duration
  • DESCRIPTION
    - Event description
  • LOCATION
    - Event location
  • RRULE
    - Recurrence rule

VTODO Components

Todo/task components.

Required Properties:

  • UID
    - Unique identifier

Common Properties:

  • SUMMARY
    - Task title
  • DUE
    - Due date
  • STATUS
    - Completion status
  • PRIORITY
    - Task priority

VCARD Components

vCard contact information.

Required Properties:

  • VERSION
    - vCard version
  • FN
    - Formatted name

Common Properties:

  • N
    - Structured name
  • EMAIL
    - Email addresses
  • TEL
    - Phone numbers
  • ADR
    - Addresses