# 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 MoonCurrent Phase
99.8%Moon Illumination
15.0Lunar 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 GibbousNext Phase (January 15)
February 11Next Full Moon
January 28Next New Moon
Lunar CalendarMoon Phases
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
Lunar Calendar
Moon Phases
#### 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 MoonCurrent Phase
Waning GibbousNext (January 15)
99.8%Moon Illumination
15.0Lunar Age
February 11Next Full Moon
January 28Next New Moon
Jan 7
Jan 13
Jan 24
Waxing Crescent
Full Moon
Waning Crescent
Lunar CalendarMoon Phases
Waning Gibbous
Next (January 15)
February 11
Next Full Moon
Waxing Crescent
Full Moon
Waning Crescent
Lunar Calendar
Moon Phases
#### 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 MoonCurrent Phase
Waning GibbousNext (January 15)
Jan 7
Jan 13
Jan 24
Waxing Crescent
Full Moon
Waning Crescent
15.0Lunar Age
99.8%Moon Illumination
February 11Next Full Moon
January 28Next New Moon
Lunar CalendarMoon Phases
Waning Gibbous
Next (January 15)
Waxing Crescent
Full Moon
Waning Crescent
February 11
Next Full Moon
Lunar Calendar
Moon Phases
#### 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 MoonCurrent Phase
Waning GibbousNext (January 15)
February 11Next Full Moon
January 28Next New Moon
Lunar CalendarMoon Phases
Waning Gibbous
Next (January 15)
February 11
Next Full Moon
Lunar Calendar
Moon Phases
Previous
[Todo ListTodo ListTodo List Task management interface shown in different layout configurations](/framework/examples/todo_list)
Next
[WeatherWeatherWeather (WeatherAPI) Weather conditions and forecasts via WeatherAPI displayed across different layout sizes](/framework/examples/weather?variant=weatherapi)