Lunar Calendar
Layout Variations
See how this plugin adapts across different mashup views. Each view shows a single instance to demonstrate how the layout responds to available space.
Full View
This layout utilizes the full screen space to display comprehensive lunar information. The current phase is prominently featured at the top in a large format, with key metrics (illumination percentage and moon age) displayed alongside. In the middle of the layout there is a complete phase sequence visualization showing all upcoming phases with dates, icons, and names. Larger icon sizes (90px) provide clear visual hierarchy. The bottom section shows the next phase details and upcoming full and new moon dates.
Full Moon
Current Phase
99.8%
Moon Illumination
15.0
Lunar Age
Jan 7
Jan 10
Jan 12
Jan 13
Jan 15
Jan 20
Jan 24
Waxing Crescent
First Quarter
Waxing Gibbous
Full Moon
Waning Gibbous
Third Quarter
Waning Crescent
Waning Gibbous
Next Phase (January 15)
February 11
Next Full Moon
January 28
Next New Moon
Lunar Calendar
Moon Phases
<div class="layout layout--col gap--space-between">
<div class="grid">
<div class="item col--span-4">
<div class="meta" />
<div class="content">
<span class="value">Full Moon</span>
<span class="label">Current Phase</span>
</div>
</div>
<div class="item col--span-2">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">99.8%</span>
<span class="label">Moon Illumination</span>
</div>
</div>
<div class="item col--span-2">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">15.0</span>
<span class="label">Lunar Age</span>
</div>
</div>
</div>
<div class="divider" />
<div class="flex flex--col w--full gap--large">
<div class="grid grid--row grid--top">
<div class="flex flex--row flex--center">
<span class="label label--small ">Jan 7</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small ">Jan 10</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small ">Jan 12</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small label--inverted">Jan 13</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small ">Jan 15</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small ">Jan 20</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small ">Jan 24</span>
</div>
</div>
<div class="grid grid--row grid--center">
<div class="flex flex--row flex--center">
<img class="moon-icon w--[90px] h--[90px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waxing-crescent-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[90px] h--[90px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-first-quarter.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[90px] h--[90px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waxing-gibbous-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[110px] h--[110px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-full.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[90px] h--[90px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waning-gibbous-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[90px] h--[90px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-third-quarter.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[90px] h--[90px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waning-crescent-3.svg" />
</div>
</div>
<div class="grid grid--row grid--top">
<div class="flex flex--row flex--center">
<span class="label label--small text--center ">Waxing Crescent</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small text--center ">First Quarter</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small text--center ">Waxing Gibbous</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small text--center label--inverted">Full Moon</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small text--center ">Waning Gibbous</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small text--center ">Third Quarter</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small text--center ">Waning Crescent</span>
</div>
</div>
</div>
<div class="divider" />
<div class="grid">
<div class="item col--span-4">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">Waning Gibbous</span>
<span class="label">Next Phase (January 15)</span>
</div>
</div>
<div class="item col--span-2">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">February 11</span>
<span class="label">Next Full Moon</span>
</div>
</div>
<div class="item col--span-2">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">January 28</span>
<span class="label">Next New Moon</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="" src="https://usetrmnl.com/images/plugins/lunar_calendar--render.svg" />
<span class="title">Lunar Calendar</span>
<span class="instance">Moon Phases</span>
</div>Half Horizontal
This layout splits the screen horizontally into two equal columns. The left column contains key metrics and dates arranged in compact grids, while the right column features the phase sequence visualization. This arrangement prioritizes the visual phase sequence while maintaining access to essential data points. The two-column approach maximizes horizontal space usage.
Full Moon
Current Phase
Waning Gibbous
Next (January 15)
99.8%
Moon Illumination
15.0
Lunar Age
February 11
Next Full Moon
January 28
Next New Moon
Jan 7
Jan 13
Jan 24
Waxing Crescent
Full Moon
Waning Crescent
Lunar Calendar
Moon Phases
<div class="layout">
<div class="grid h--full">
<div class="col col--span-6 h--full gap--space-between">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">Full Moon</span>
<span class="label">Current Phase</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">Waning Gibbous</span>
<span class="label">Next (January 15)</span>
</div>
</div>
</div>
<div class="divider" />
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">99.8%</span>
<span class="label">Moon Illumination</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">15.0</span>
<span class="label">Lunar Age</span>
</div>
</div>
</div>
<div class="divider" />
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">February 11</span>
<span class="label">Next Full Moon</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">January 28</span>
<span class="label">Next New Moon</span>
</div>
</div>
</div>
</div>
<div class="col col--span-6 col--center h--full">
<div class="flex flex--col gap--space-between w--full h--full">
<div class="grid grid--row grid--center">
<div class="flex flex--row flex--left">
<span class="label label--small">Jan 7</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small label--inverted">Jan 13</span>
</div>
<div class="flex flex--row flex--right">
<span class="label label--small">Jan 24</span>
</div>
</div>
<div class="grid grid--row grid--center">
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waxing-crescent-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-first-quarter.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waxing-gibbous-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[65px] h--[65px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-full.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waning-gibbous-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-third-quarter.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waning-crescent-3.svg" />
</div>
</div>
<div class="grid grid--row grid--center">
<div class="flex flex--row flex--left">
<span class="label label--small">Waxing Crescent</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small label--inverted">Full Moon</span>
</div>
<div class="flex flex--row flex--right">
<span class="label label--small">Waning Crescent</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="" src="https://usetrmnl.com/images/plugins/lunar_calendar--render.svg" />
<span class="title">Lunar Calendar</span>
<span class="instance">Moon Phases</span>
</div>Half Vertical
This layout uses vertical stacking optimized for narrow vertical space. Key information (current/next phase) is shown at the top in a two-column grid. The phase sequence is displayed in the center with dates, icons, and names, with first, current, and last phases emphasized. Essential metrics (age, illumination) and upcoming dates are shown at the bottom.
Full Moon
Current Phase
Waning Gibbous
Next (January 15)
Jan 7
Jan 13
Jan 24
Waxing Crescent
Full Moon
Waning Crescent
15.0
Lunar Age
99.8%
Moon Illumination
February 11
Next Full Moon
January 28
Next New Moon
Lunar Calendar
Moon Phases
<div class="layout layout--col gap--space-between">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">Full Moon</span>
<span class="label">Current Phase</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">Waning Gibbous</span>
<span class="label">Next (January 15)</span>
</div>
</div>
</div>
<div class="divider" />
<div class="flex flex--col gap--medium w--full">
<div class="grid grid--row grid--center">
<div class="flex flex--row flex--left">
<span class="label label--small">Jan 7</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small label--inverted">Jan 13</span>
</div>
<div class="flex flex--row flex--right">
<span class="label label--small">Jan 24</span>
</div>
</div>
<div class="grid grid--row grid--center">
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waxing-crescent-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-first-quarter.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waxing-gibbous-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[65px] h--[65px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-full.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waning-gibbous-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-third-quarter.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[45px] h--[45px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waning-crescent-3.svg" />
</div>
</div>
<div class="grid grid--row grid--center">
<div class="flex flex--row flex--left">
<span class="label label--small">Waxing Crescent</span>
</div>
<div class="flex flex--row flex--center">
<span class="label label--small label--inverted">Full Moon</span>
</div>
<div class="flex flex--row flex--right">
<span class="label label--small">Waning Crescent</span>
</div>
</div>
</div>
<div class="divider" />
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">15.0</span>
<span class="label">Lunar Age</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">99.8%</span>
<span class="label">Moon Illumination</span>
</div>
</div>
</div>
<div class="divider" />
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">February 11</span>
<span class="label">Next Full Moon</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">January 28</span>
<span class="label">Next New Moon</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="" src="https://usetrmnl.com/images/plugins/lunar_calendar--render.svg" />
<span class="title">Lunar Calendar</span>
<span class="instance">Moon Phases</span>
</div>Quadrant
This layout uses minimal space (one-quarter of the screen) with highly condensed content. The top shows current and next phase in a compact two-column format. The center features a simplified phase sequence visualization with icons only. Essential upcoming dates (full moon, new moon) are shown at the bottom. All elements use smaller sizes (35px icons) to fit the constrained space.
Full Moon
Current Phase
Waning Gibbous
Next (January 15)
February 11
Next Full Moon
January 28
Next New Moon
Lunar Calendar
Moon Phases
<div class="layout layout--col gap--space-between">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">Full Moon</span>
<span class="label">Current Phase</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">Waning Gibbous</span>
<span class="label">Next (January 15)</span>
</div>
</div>
</div>
<div class="divider" />
<div class="w--full">
<div class="grid grid--row grid--center">
<div class="flex flex--row flex--center">
<img class="moon-icon w--[35px] h--[35px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waxing-crescent-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[35px] h--[35px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-first-quarter.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[35px] h--[35px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waxing-gibbous-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[50px] h--[50px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-full.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[35px] h--[35px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waning-gibbous-3.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[35px] h--[35px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-third-quarter.svg" />
</div>
<div class="flex flex--row flex--center">
<img class="moon-icon w--[35px] h--[35px]" alt="Moon phase" src="https://usetrmnl.com/images/plugins/weather/wi-moon-alt-waning-crescent-3.svg" />
</div>
</div>
</div>
<div class="divider" />
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">February 11</span>
<span class="label">Next Full Moon</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--xsmall">January 28</span>
<span class="label">Next New Moon</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="" src="https://usetrmnl.com/images/plugins/lunar_calendar--render.svg" />
<span class="title">Lunar Calendar</span>
<span class="instance">Moon Phases</span>
</div>