Packages
moon
2.90.5
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/calendar_page.ex
defmodule MoonWeb.Pages.Components.CalendarPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Autolayouts.TopToDown
alias Moon.Components.Calendar
alias Moon.Components.Heading
alias Moon.Components.Link
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/calendar",
name: "Calendar"
}
]
)
def mount(_params, _session, socket) do
socket =
assign(socket,
events: generate_events()
)
{:ok, socket}
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<TopToDown>
<Heading size={56} class="mb-4">Calendar</Heading>
<p>
<Link to="https://www.figma.com/file/S3q1SkVngbwHuwpxHKCsgtJj/Moon---Components?node-id=26127%3A3454">Figma design</Link>
<Link to="https://github.com/coingaming/moon/blob/main/lib/moon_web/pages/components/calendar_page.ex">Sourcecode of this page</Link>
<Link to="https://moon.io/toolkit/calendar">React implementation</Link>
</p>
<ExampleAndCode layout="column" id="calendar_1">
<:example>
<Calendar id="default_calendar" week_starts_on={1} events={@events} />
</:example>
<:code>{calendar_1_code()}</:code>
<:state>@events = {inspect(@events, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Custom weekstart" layout="column" id="calendar_2">
<:example>
<Calendar id="sunday_calendar" week_starts_on={7} events={@events} />
</:example>
<:code>{calendar_2_code()}</:code>
<:state>@events = {inspect(@events, pretty: true)}</:state>
<:note>
Use <code class="bg-gohan-40">week_starts_on</code> prop. The weekstart can between 1..7, where 1 means Monday. Default value is 1.
</:note>
</ExampleAndCode>
</TopToDown>
</Page>
"""
end
def generate_events do
[
%{
id: Ecto.UUID.generate(),
started_at: shifted_time(-240),
ended_at: shifted_time(-238),
description: "Syncronite Splitz™",
location: "Yggdrasil"
},
%{
id: Ecto.UUID.generate(),
started_at: shifted_time(46),
ended_at: shifted_time(48),
description: "Miner Donkey Trouble",
location: "Play'n Go"
},
%{
id: Ecto.UUID.generate(),
started_at: shifted_time(3),
ended_at: shifted_time(5),
description: "Bayern Munich vs Augsburg",
location: "Allianz Arena, Munich, Germany"
},
%{
id: Ecto.UUID.generate(),
started_at: shifted_time(1),
ended_at: shifted_time(3),
description: "Aston Villa vs Chelsea",
location: "Villa Park, Aston, England"
},
%{
id: Ecto.UUID.generate(),
started_at: shifted_time(24),
ended_at: shifted_time(28),
description: "Formula 1 Monaco GP 2021",
location: "Monaco"
}
]
end
def shifted_time(hours) do
Timex.now()
|> Timex.to_naive_datetime()
|> NaiveDateTime.truncate(:second)
|> Timex.shift(hours: hours)
end
def calendar_1_code do
"""
alias Moon.Components.Calendar
<Calendar
id="default_calendar"
week_starts_on={ 1 }
events={ @events }
/>
"""
end
def calendar_2_code do
"""
alias Moon.Components.Calendar
<Calendar
id="sunday_calendar"
week_starts_on={ 7 }
events={ @events }
/>
"""
end
end