Giter VIP home page Giter VIP logo

week-planner-card's Introduction

Week Planner Card

GitHub Release GitHub Downloads (all assets, all releases) GitHub commit activity GitHub License Static Badge

Custom Home Assistant card displaying a responsive overview of multiple days with events from one or multiple calendars

Example Week Planner Cards

Table of Content

Installation

HACS (Recommended)

  1. Make sure HACS is installed and working.
  2. Add this repository (https://github.com/FamousWolf/week-planner-card) via HACS Custom repositories
  3. Download and install using HACS

Manual

  1. Download and copy eweek-planner-card.js from the latest release into your config/www directory.
  2. Add the resource reference to Home Assistant configuration using one of these methods:
  • Edit your configuration.yaml Add: 
    resources:
  - url: /local/week-planner-card.js?version=1.0.1
type: module
  • Using the graphical editor
    1. Make sure advanced mode is enabled in your user profile
    2. Navigate to Configuration -> Lovelace Dashboards -> Resources Tab. Hit orange (+) icon
    3. Enter URL /local/week-planner-card.js and select type "JavaScript Module".
    4. Restart Home Assistant.

Configuration

Main Options

Name Type Default Supported options Description
type string Required custom:week-planner-card Type of the card
days number 7 Any positive integer number The number of days to show
noCardBackground boolean false false | true Do not show default card background and border
eventBackground string var(--card-background-color, inherit) Any CSS color Background color of the events
updateInterval number 60 Any positive integer number Seconds between checks for new events
calendars object list Required See Calendars Calendars shown in this card
texts object list {} See Texts Texts used in the card

Calendars

Name Type Default Supported options Description
entity string Required calendar.my_calendar Entity ID
color string optional Any CSS color Color used for events from the calendar

Texts

Name Type Default Supported options Description
fullDay string Entire day Any text Text shown for full day events instead of time
noEvents string No events Any text Text shown when there are no events for a day
today string Today Any text Text shown for the today instead of the week day
tomorrow string Tomorrow Any text Text shown for the tomorrow instead of the week day
sunday string Sunday Any text Text shown for Sundays
monday string Monday Any text Text shown for Mondays
tuesday string Tuesday Any text Text shown for Tuesdays
wednesday string Wednesday Any text Text shown for Wednesdays
thursday string Thursday Any text Text shown for Thursdays
friday string Friday Any text Text shown for Fridays
saturday string Saturday Any text Text shown for Saturdays

week-planner-card's People

Contributors

famouswolf avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.