Skip to content

Instantly share code, notes, and snippets.

@kutyel

kutyel/Main.elm

Last active April 15, 2020 08:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kutyel/d06da8430a7423be495d566a40ce1ac7 to your computer and use it in GitHub Desktop.
Save kutyel/d06da8430a7423be495d566a40ce1ac7 to your computer and use it in GitHub Desktop.
Download ZIP
Google Calendar Chart Web Component in Elm https://ellie-app.com/8B8tftGqV6Da1
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<script crossorigin='anonymous' type="module">
import { GoogleChart } from "https://unpkg.com/@google-web-components/google-chart?module"
class Calendar extends GoogleChart {
constructor() { super() }
static get properties() {
return {
dateRows: {
type: Array,
observer: '_dateRowsChanged'
}
}
}
_dateRowsChanged(data) {
super.rows = data.map(([date, value]) => [new Date(date), value]
}
}
customElements.define('google-calendar', Calendar)
</script>
<script src="elm.js"></script>
<style>
/* you can style your program here */
</style>
</head>
<body>
<main></main>
<script>
const app = Elm.Main.init({ node: document.querySelector('main') })
</script>
</body>
</html>
Raw
Main.elm
module Main exposing (main)
import Dict
import Html exposing (Html)
import Html.Attributes exposing (attribute, property)
import Json.Encode as Encode
main : Html msg
main =
Html.node "google-calendar"
[ attribute "type" "calendar"
, property "options" <|
Encode.object [ ( "title", Encode.string "Calendar" ) ]
, property "cols" <|
Encode.list Encode.object
[ [ ( "id", Encode.string "Date" ), ( "type", Encode.string "date" ) ]
, [ ( "id", Encode.string "Won/Loss" ), ( "type", Encode.string "number" ) ]
]
, property "dateRows" <|
Encode.list (Encode.list identity) <|
[ [ Encode.string "2012-03-13", Encode.int 31 ]
, [ Encode.string "2012-03-14", Encode.int 28 ]
, [ Encode.string "2012-03-15", Encode.int 41 ]
]
]
[]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment