### YAML Frontmatter Example for Obsidian Notes

Source: https://github.com/liamcain/obsidian-calendar-plugin/wiki/Styling-with-Frontmatter

An example of YAML frontmatter that can be added to the top of Obsidian notes. This snippet demonstrates the 'aliases' and 'tags' entries, which the Obsidian Calendar plugin can utilize for styling.

```markdown
---
aliases:
  - First Day at Job
tags:
  - important
  - work
  - todo
---

```

--------------------------------

### Manage Calendar Plugin Settings (TypeScript)

Source: https://context7.com/liamcain/obsidian-calendar-plugin/llms.txt

This snippet defines the interface and default values for the plugin's settings, and provides a `CalendarSettingsTab` class for managing these settings through Obsidian's UI. It includes examples of creating and updating settings for 'Words per dot', 'Start week on', and 'Confirm before creating new note'.

```typescript
import { App, PluginSettingTab, Setting } from "obsidian";
import type CalendarPlugin from "./main";

export interface ISettings {
  wordsPerDot: number;
  weekStart: "locale" | "sunday" | "monday";
  shouldConfirmBeforeCreate: boolean;
  showWeeklyNote: boolean;
  weeklyNoteFormat: string;
  weeklyNoteTemplate: string;
  weeklyNoteFolder: string;
  localeOverride: string;
}

export const defaultSettings: ISettings = {
  shouldConfirmBeforeCreate: true,
  weekStart: "locale",
  wordsPerDot: 250,
  showWeeklyNote: false,
  weeklyNoteFormat: "",
  weeklyNoteTemplate: "",
  weeklyNoteFolder: "",
  localeOverride: "system-default",
};

export class CalendarSettingsTab extends PluginSettingTab {
  private plugin: CalendarPlugin;

  constructor(app: App, plugin: CalendarPlugin) {
    super(app, plugin);
    this.plugin = plugin;
  }

  display(): void {
    this.containerEl.empty();
    this.containerEl.createEl("h3", { text: "General Settings" });

    // Words per dot setting
    new Setting(this.containerEl)
      .setName("Words per dot")
      .setDesc("How many words should be represented by a single dot?")
      .addText((textfield) => {
        textfield.setPlaceholder("250");
        textfield.inputEl.type = "number";
        textfield.setValue(String(this.plugin.options.wordsPerDot));
        textfield.onChange(async (value) => {
          this.plugin.writeOptions(() => ({
            wordsPerDot: value !== "" ? Number(value) : undefined,
          }));
        });
      });

    // Week start setting
    new Setting(this.containerEl)
      .setName("Start week on:")
      .setDesc("Choose what day of the week to start")
      .addDropdown((dropdown) => {
        dropdown.addOption("locale", "Locale default");
        dropdown.addOption("sunday", "Sunday");
        dropdown.addOption("monday", "Monday");
        dropdown.setValue(this.plugin.options.weekStart);
        dropdown.onChange(async (value) => {
          this.plugin.writeOptions(() => ({ weekStart: value }));
        });
      });

    // Confirm before create setting
    new Setting(this.containerEl)
      .setName("Confirm before creating new note")
      .setDesc("Show a confirmation modal before creating a new note")
      .addToggle((toggle) => {
        toggle.setValue(this.plugin.options.shouldConfirmBeforeCreate);
        toggle.onChange(async (value) => {
          this.plugin.writeOptions(() => ({
            shouldConfirmBeforeCreate: value,
          }));
        });
      });
  }
}

// Example: Programmatically update settings
await plugin.writeOptions((old) => ({
  ...old,
  wordsPerDot: 300,
  shouldConfirmBeforeCreate: false,
}));

```

--------------------------------

### Format Weekly Note Filenames with Moment.js

Source: https://github.com/liamcain/obsidian-calendar-plugin/blob/master/README.md

This example demonstrates how to configure the filename format for weekly notes using Moment.js syntax, allowing for the inclusion of 'unformatted' words. By wrapping specific words in square brackets `[]`, Moment.js will ignore them, enabling custom naming conventions like 'Week 21 of Year 2020'. This relies on the Moment.js library for date formatting.

```text
[Week] ww [of Year] gggg
```

--------------------------------

### Obsidian Calendar Plugin CSS Class Override Example

Source: https://github.com/liamcain/obsidian-calendar-plugin/blob/master/README.md

Example of how to override specific CSS classes for the obsidian-calendar-plugin within obsidian.css. It demonstrates targeting a human-readable class name prefixed with '#calendar-container' to avoid conflicts.

```css
#calendar-container .year {
  color: var(--text-normal);
}
```

--------------------------------

### Initialize Obsidian Calendar Plugin View and Commands (TypeScript)

Source: https://context7.com/liamcain/obsidian-calendar-plugin/llms.txt

This snippet registers the custom calendar view, adds commands to open the view, interact with weekly notes, and reveal the active note in the calendar. It also handles loading settings and initializing the view when the workspace is ready or on layout load.

```typescript
import { Plugin, WorkspaceLeaf } from "obsidian";
import { VIEW_TYPE_CALENDAR } from "./constants";
import CalendarView from "./view";
import { CalendarSettingsTab } from "./settings";

export default class CalendarPlugin extends Plugin {
  async onload(): Promise<void> {
    // Register the calendar view type
    this.registerView(
      VIEW_TYPE_CALENDAR,
      (leaf: WorkspaceLeaf) => new CalendarView(leaf)
    );

    // Add command to open calendar view
    this.addCommand({
      id: "show-calendar-view",
      name: "Open view",
      checkCallback: (checking: boolean) => {
        if (checking) {
          return this.app.workspace.getLeavesOfType(VIEW_TYPE_CALENDAR).length === 0;
        }
        this.initLeaf();
      },
    });

    // Add command to open weekly note
    this.addCommand({
      id: "open-weekly-note",
      name: "Open Weekly Note",
      callback: () => this.view.openOrCreateWeeklyNote(window.moment(), false),
    });

    // Add command to reveal active note in calendar
    this.addCommand({
      id: "reveal-active-note",
      name: "Reveal active note",
      callback: () => this.view.revealActiveNote(),
    });

    // Load settings and initialize
    await this.loadOptions();
    this.addSettingTab(new CalendarSettingsTab(this.app, this));

    if (this.app.workspace.layoutReady) {
      this.initLeaf();
    } else {
      this.registerEvent(
        this.app.workspace.on("layout-ready", this.initLeaf.bind(this))
      );
    }
  }

  initLeaf(): void {
    if (this.app.workspace.getLeavesOfType(VIEW_TYPE_CALENDAR).length) {
      return;
    }
    // Create calendar in right sidebar
    this.app.workspace.getRightLeaf(false).setViewState({
      type: VIEW_TYPE_CALENDAR,
    });
  }
}

```

--------------------------------

### Create Weekly Notes in Obsidian

Source: https://context7.com/liamcain/obsidian-calendar-plugin/llms.txt

This TypeScript function allows for the creation of weekly notes within Obsidian. It checks for existing notes, prompts the user for confirmation if configured, and opens the note in a new or active leaf. Dependencies include 'moment', 'obsidian', and 'obsidian-daily-notes-interface'.

```typescript
import type { Moment } from "moment";
import type { TFile } from "obsidian";
import { createWeeklyNote, getWeeklyNoteSettings } from "obsidian-daily-notes-interface";

/**
 * Create a Weekly Note for a given date
 */
export async function tryToCreateWeeklyNote(
  date: Moment,
  inNewSplit: boolean,
  settings: ISettings,
  cb?: (file: TFile) => void
): Promise<void> {
  const { workspace } = window.app;
  const { format } = getWeeklyNoteSettings();
  const filename = date.format(format);

  const createFile = async () => {
    const weeklyNote = await createWeeklyNote(date);
    const leaf = inNewSplit
      ? workspace.splitActiveLeaf()
      : workspace.getUnpinnedLeaf();

    await leaf.openFile(weeklyNote, { active: true });
    cb?.(weeklyNote);
  };

  if (settings.shouldConfirmBeforeCreate) {
    createConfirmationDialog({
      cta: "Create",
      onAccept: createFile,
      text: `File ${filename} does not exist. Would you like to create it?`,
      title: "New Weekly Note",
    });
  } else {
    await createFile();
  }
}

// Example: Create weekly note for current week
const today = window.moment();
const startOfWeek = today.clone().startOf('week');
await tryToCreateWeeklyNote(startOfWeek, false, settings, (file) => {
  console.log(`Created weekly note: ${file.path}`);
});
```

--------------------------------

### Create Daily Notes with Confirmation (TypeScript)

Source: https://context7.com/liamcain/obsidian-calendar-plugin/llms.txt

This function attempts to create a daily note for a specified date, using Obsidian's daily notes interface. It includes an option to prompt the user for confirmation before creation and can optionally call a callback function upon successful creation.

```typescript
import type { Moment } from "moment";
import type { TFile } from "obsidian";
import { createDailyNote, getDailyNoteSettings } from "obsidian-daily-notes-interface";

/**
 * Create a Daily Note for a given date with optional confirmation
 */
export async function tryToCreateDailyNote(
  date: Moment,
  inNewSplit: boolean,
  settings: ISettings,
  cb?: (newFile: TFile) => void
): Promise<void> {
  const { workspace } = window.app;
  const { format } = getDailyNoteSettings();
  const filename = date.format(format);

  const createFile = async () => {
    // Create the daily note using Obsidian's API
    const dailyNote = await createDailyNote(date);

    // Open in new split or existing leaf
    const leaf = inNewSplit
      ? workspace.splitActiveLeaf()
      : workspace.getUnpinnedLeaf();

    await leaf.openFile(dailyNote, { active: true });

    // Call callback with created file
    cb?.(dailyNote);
  };

  if (settings.shouldConfirmBeforeCreate) {
    createConfirmationDialog({
      cta: "Create",
      onAccept: createFile,
      text: `File ${filename} does not exist. Would you like to create it?`,
      title: "New Daily Note",
    });
  } else {
    await createFile();
  }
}

// Example usage: Create a daily note for today
const today = window.moment();
const settings = { shouldConfirmBeforeCreate: true };
await tryToCreateDailyNote(today, false, settings, (file) => {
  console.log(`Created daily note: ${file.path}`);
});

```

--------------------------------

### Calendar View Component in TypeScript

Source: https://context7.com/liamcain/obsidian-calendar-plugin/llms.txt

The main CalendarView component in TypeScript handles the rendering and interaction logic for the calendar interface. It imports necessary modules from Obsidian and Svelte, registers event listeners for vault and workspace changes, and defines methods for opening and creating daily notes. Dependencies include 'moment', 'obsidian', and 'obsidian-daily-notes-interface'.

```typescript
import type { Moment } from "moment";
import { ItemView, TFile, WorkspaceLeaf } from "obsidian";
import { getDailyNote, getDailyNoteSettings } from "obsidian-daily-notes-interface";
import Calendar from "./ui/Calendar.svelte";

export default class CalendarView extends ItemView {
  private calendar: Calendar;

  constructor(leaf: WorkspaceLeaf) {
    super(leaf);

    // Bind event handlers
    this.openOrCreateDailyNote = this.openOrCreateDailyNote.bind(this);
    this.openOrCreateWeeklyNote = this.openOrCreateWeeklyNote.bind(this);

    // Register vault events
    this.registerEvent(this.app.vault.on("create", this.onFileCreated));
    this.registerEvent(this.app.vault.on("delete", this.onFileDeleted));
    this.registerEvent(this.app.vault.on("modify", this.onFileModified));
    this.registerEvent(this.app.workspace.on("file-open", this.onFileOpen));
  }

  getViewType(): string {
    return "calendar";
  }

  getDisplayText(): string {
    return "Calendar";
  }

  getIcon(): string {
    return "calendar-with-checkmark";
  }

  async onOpen(): Promise<void> {
    const sources = [
      customTagsSource,
      streakSource,
      wordCountSource,
      tasksSource,
    ];

    // Allow external plugins to add sources
    this.app.workspace.trigger("calendar:open", sources);

    this.calendar = new Calendar({
      target: this.contentEl,
      props: {
        onClickDay: this.openOrCreateDailyNote,
        onClickWeek: this.openOrCreateWeeklyNote,
        onHoverDay: this.onHoverDay,
        onContextMenuDay: this.onContextMenuDay,
        sources,
      },
    });
  }

  async openOrCreateDailyNote(date: Moment, inNewSplit: boolean): Promise<void> {
    const { workspace } = this.app;
    const existingFile = getDailyNote(date, dailyNotes);

    if (!existingFile) {
      tryToCreateDailyNote(date, inNewSplit, this.settings, (dailyNote: TFile) => {
        activeFile.setFile(dailyNote);
      });
      return;
    }

    const leaf = inNewSplit
      ? workspace.splitActiveLeaf()
      : workspace.getUnpinnedLeaf();
    await leaf.openFile(existingFile, { active: true });

    activeFile.setFile(existingFile);
  }

  revealActiveNote(): void {
    const { activeLeaf } = this.app.workspace;

    if (activeLeaf.view instanceof FileView) {
      const date = getDateFromFile(activeLeaf.view.file, "day");
      if (date) {
        this.calendar.$set({ displayedMonth: date });
      }
    }
  }
}

// Example: Open calendar view programmatically
const leaf = app.workspace.getRightLeaf(false);
await leaf.setViewState({ type: "calendar" });

```

--------------------------------

### Embed Weekly Notes in a Weekly Note Template

Source: https://github.com/liamcain/obsidian-calendar-plugin/blob/master/README.md

This markdown snippet can be added to your weekly note template to display a "Week at a Glance" section. It embeds daily notes for each day of the week, allowing for a seamless view of the week's content. No specific dependencies are required beyond the Obsidian editor.

```markdown
## Week at a Glance

![[{{sunday:gggg-MM-DD}}]]
![[{{monday:gggg-MM-DD}}]]
![[{{tuesday:gggg-MM-DD}}]]
![[{{wednesday:gggg-MM-DD}}]]
![[{{thursday:gggg-MM-DD}}]]
![[{{friday:gggg-MM-DD}}]]
![[{{saturday:gggg-MM-DD}}]]
```

--------------------------------

### Track Incomplete Tasks in Daily Notes (TypeScript)

Source: https://context7.com/liamcain/obsidian-calendar-plugin/llms.txt

This snippet defines functions to count incomplete tasks in a given note and generate visual indicators (hollow dots) for them. It leverages Obsidian's API to read file contents and identify task syntax. The `tasksSource` object integrates this functionality into the calendar UI.

```typescript
import type { Moment } from "moment";
import type { TFile } from "obsidian";
import type { ICalendarSource, IDayMetadata, IDot } from "obsidian-calendar-ui";
import { getDailyNote } from "obsidian-daily-notes-interface";

/**
 * Count remaining tasks in a note
 */
export async function getNumberOfRemainingTasks(note: TFile): Promise<number> {
  if (!note) {
    return 0;
  }

  const { vault } = window.app;
  const fileContents = await vault.cachedRead(note);

  // Match unchecked tasks: - [ ] or * [ ]
  return (fileContents.match(/(-|*) [ ]/g) || []).length;
}

/**
 * Generate task indicator dots
 */
export async function getDotsForDailyNote(dailyNote: TFile | null): Promise<IDot[]> {
  if (!dailyNote) {
    return [];
  }

  const numTasks = await getNumberOfRemainingTasks(dailyNote);
  const dots = [];

  if (numTasks) {
    // Show single hollow dot if tasks exist
    dots.push({
      className: "task",
      color: "default",
      isFilled: false,
    });
  }

  return dots;
}

// Calendar source for tasks
export const tasksSource: ICalendarSource = {
  getDailyMetadata: async (date: Moment): Promise<IDayMetadata> => {
    const file = getDailyNote(date, dailyNotes);
    const dots = await getDotsForDailyNote(file);
    return { dots };
  },

  getWeeklyMetadata: async (date: Moment): Promise<IDayMetadata> => {
    const file = getWeeklyNote(date, weeklyNotes);
    const dots = await getDotsForDailyNote(file);
    return { dots };
  },
};

// Example: Check tasks for a date
const date = window.moment("2024-01-15");
const dailyNote = getDailyNote(date, dailyNotes);
const taskCount = await getNumberOfRemainingTasks(dailyNote);
console.log(`Remaining tasks: ${taskCount}`);

```

--------------------------------

### CSS for Styling Calendar Days by Frontmatter Tags

Source: https://github.com/liamcain/obsidian-calendar-plugin/wiki/Styling-with-Frontmatter

CSS rules to target and style calendar days based on the 'tags' frontmatter applied by the Obsidian Calendar plugin. The plugin adds a 'data-tags' attribute to elements, allowing specific targeting via CSS selectors.

```css
/* target days with just #tag1 */
#calendar-container [data-tags~="tag1"] {
}

/* target days with just #tag2 */
#calendar-container [data-tags~="tag2"] {
}

/* target days with any tag */
#calendar-container [data-tags] {
}

```

--------------------------------

### CSS Customization for Calendar Styling

Source: https://context7.com/liamcain/obsidian-calendar-plugin/llms.txt

This CSS snippet demonstrates how to customize the appearance of the Obsidian Calendar plugin using CSS variables. It allows for adjustments to background colors, element colors (dots, arrows, buttons), and text colors for various calendar elements like titles, headings, days, and weekends. Specific styles are provided for days with notes, weekend cells, hiding task dots, and customizing the year display.

```css
/* Basic calendar styling customization */
#calendar-container {
  /* Background colors */
  --color-background-heading: transparent;
  --color-background-day: transparent;
  --color-background-weeknum: transparent;
  --color-background-weekend: rgba(255, 0, 0, 0.05);

  /* Element colors */
  --color-dot: var(--text-muted);
  --color-arrow: var(--text-muted);
  --color-button: var(--text-muted);

  /* Text colors */
  --color-text-title: var(--text-normal);
  --color-text-heading: var(--text-muted);
  --color-text-day: var(--text-normal);
  --color-text-today: var(--interactive-accent);
  --color-text-weeknum: var(--text-muted);
}

/* Style days with notes */
#calendar-container .has-note {
  font-weight: bold;
}

/* Style weekend cells */
#calendar-container .weekend {
  background-color: var(--color-background-weekend);
}

/* Hide task dots */
#calendar-container .task {
  display: none;
}

/* Customize year display */
#calendar-container .year {
  color: var(--text-faint);
  font-size: 0.9em;
}

```

--------------------------------

### Calculate Word Count as Dots for Obsidian Notes

Source: https://context7.com/liamcain/obsidian-calendar-plugin/llms.txt

This TypeScript code calculates the word count of a given Obsidian note and represents it as a number of dots (1-5). It defines constants for words per dot and maximum dots. The output is used to generate metadata for daily and weekly notes displayed on the calendar. Dependencies include 'moment', 'obsidian', 'obsidian-daily-notes-interface', and 'obsidian-calendar-ui'.

```typescript
import type { Moment } from "moment";
import type { TFile } from "obsidian";
import type { ICalendarSource, IDayMetadata, IDot } from "obsidian-calendar-ui";
import { getDailyNote } from "obsidian-daily-notes-interface";

const DEFAULT_WORDS_PER_DOT = 250;
const NUM_MAX_DOTS = 5;

/**
 * Calculate number of dots based on word count
 */
export async function getWordLengthAsDots(note: TFile): Promise<number> {
  const wordsPerDot = DEFAULT_WORDS_PER_DOT;
  if (!note || wordsPerDot <= 0) {
    return 0;
  }

  const fileContents = await window.app.vault.cachedRead(note);
  const wordCount = getWordCount(fileContents); // Assuming getWordCount is defined elsewhere
  const numDots = wordCount / wordsPerDot;

  // Clamp between 1 and 5 dots
  return Math.min(Math.max(1, Math.floor(numDots)), NUM_MAX_DOTS);
}

/**
 * Generate dot metadata for a daily note
 */
export async function getDotsForDailyNote(dailyNote: TFile | null): Promise<IDot[]> {
  if (!dailyNote) {
    return [];
  }

  const numSolidDots = await getWordLengthAsDots(dailyNote);
  const dots = [];

  for (let i = 0; i < numSolidDots; i++) {
    dots.push({
      color: "default",
      isFilled: true,
    });
  }

  return dots;
}

// Calendar source for word counts
export const wordCountSource: ICalendarSource = {
  getDailyMetadata: async (date: Moment): Promise<IDayMetadata> => {
    const file = getDailyNote(date, dailyNotes); // Assuming dailyNotes is defined elsewhere
    const dots = await getDotsForDailyNote(file);
    return { dots };
  },

  getWeeklyMetadata: async (date: Moment): Promise<IDayMetadata> => {
    const file = getWeeklyNote(date, weeklyNotes); // Assuming weeklyNotes is defined elsewhere
    const dots = await getDotsForDailyNote(file);
    return { dots };
  },
};

// Example: Get word count for a specific date
const date = window.moment("2024-01-15", "YYYY-MM-DD");
const metadata = await wordCountSource.getDailyMetadata(date);
console.log(`Dots for date: ${metadata.dots.length}`);
```

--------------------------------

### Custom Styling for Weekends in Calendar

Source: https://github.com/liamcain/obsidian-calendar-plugin/blob/master/README.md

This CSS snippet allows you to customize the appearance of weekend days within the Obsidian Calendar plugin. By setting the `--color-background-weekend` variable, you can distinguish weekends from weekdays with a custom background color. This requires the ability to add custom CSS to your Obsidian theme.

```css
:root {
  --color-background-weekend: #ff0000;
}
```

--------------------------------

### Obsidian Calendar Plugin CSS Variables

Source: https://github.com/liamcain/obsidian-calendar-plugin/blob/master/README.md

This snippet shows the CSS variables that can be overridden in obsidian.css to customize the appearance of the obsidian-calendar-plugin. It includes variables for background colors, dots, arrows, buttons, and text elements.

```css
/* obsidian-calendar-plugin */
/* https://github.com/liamcain/obsidian-calendar-plugin */

#calendar-container {
  --color-background-heading: transparent;
  --color-background-day: transparent;
  --color-background-weeknum: transparent;
  --color-background-weekend: transparent;

  --color-dot: var(--text-muted);
  --color-arrow: var(--text-muted);
  --color-button: var(--text-muted);

  --color-text-title: var(--text-normal);
  --color-text-heading: var(--text-muted);
  --color-text-day: var(--text-normal);
  --color-text-today: var(--interactive-accent);
  --color-text-weeknum: var(--text-muted);
}
```

--------------------------------

### Add Starred Item Indicator to Obsidian Calendar (CSS)

Source: https://github.com/liamcain/obsidian-calendar-plugin/wiki/Important-day

This CSS code snippet adds a visual indicator to items in the Obsidian Calendar plugin that are tagged with 'flagged'. It uses a data URI to embed an SVG icon, positioning it absolutely at the top-right corner of the flagged item's container. Ensure the 'calendar-starred.css' file is placed in the correct 'Snippets' folder within your Obsidian vault.

```css
#calendar-container [data-tags~="flagged"]::after {
  content: url('data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.867 55.867" style="enable-background:new 0 0 55.867 55.867;" xml:space="preserve"> <path d="M55.818,21.578c-0.118-0.362-0.431-0.626-0.808-0.681L36.92,18.268L28.83,1.876c-0.168-0.342-0.516-0.558-0.896-0.558 s-0.729,0.216-0.896,0.558l-8.091,16.393l-18.09,2.629c-0.377,0.055-0.689,0.318-0.808,0.681c-0.117,0.361-0.02,0.759,0.253,1.024 l13.091,12.76l-3.091,18.018c-0.064,0.375,0.09,0.754,0.397,0.978c0.309,0.226,0.718,0.255,1.053,0.076l16.182-8.506l16.18,8.506 c0.146,0.077,0.307,0.115,0.466,0.115c0.207,0,0.413-0.064,0.588-0.191c0.308-0.224,0.462-0.603,0.397-0.978l-3.09-18.017 l13.091-12.761C55.838,22.336,55.936,21.939,55.818,21.578z" fill="yellow" stroke="white"/></svg>');
  position: absolute;
  top: -4px;
  right: 4px;
  height: 8px;
  width: 8px;
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.