@marigoldapp/svelte-calendar
Version:
A small date picker built with Svelte 3. Demo available here: [demo page].
698 lines (628 loc) • 18.9 kB
JavaScript
import './App.css.proxy.js';
/* src/App.svelte generated by Svelte v3.29.4 */
import {
SvelteComponent,
add_flush_callback,
append,
attr,
bind,
binding_callbacks,
create_component,
destroy_component,
detach,
element,
init,
insert,
mount_component,
noop,
safe_not_equal,
set_data,
space,
text,
transition_in,
transition_out
} from "../web_modules/svelte/internal.js";
import hljs from "../web_modules/highlightjs.js";
import Datepicker from "./Components/Datepicker.js";
import { onMount } from "../web_modules/svelte.js";
function create_else_block_1(ctx) {
let t;
return {
c() {
t = text("Pick a date");
},
m(target, anchor) {
insert(target, t, anchor);
},
p: noop,
d(detaching) {
if (detaching) detach(t);
}
};
}
// (80:4) {#if dateChosen}
function create_if_block_1(ctx) {
let t0;
let t1;
return {
c() {
t0 = text("Chosen: ");
t1 = text(/*formattedSelected*/ ctx[0]);
},
m(target, anchor) {
insert(target, t0, anchor);
insert(target, t1, anchor);
},
p(ctx, dirty) {
if (dirty & /*formattedSelected*/ 1) set_data(t1, /*formattedSelected*/ ctx[0]);
},
d(detaching) {
if (detaching) detach(t0);
if (detaching) detach(t1);
}
};
}
// (78:2) <Datepicker format={dateFormat} bind:formattedSelected bind:dateChosen>
function create_default_slot_1(ctx) {
let button;
function select_block_type(ctx, dirty) {
if (/*dateChosen*/ ctx[1]) return create_if_block_1;
return create_else_block_1;
}
let current_block_type = select_block_type(ctx, -1);
let if_block = current_block_type(ctx);
return {
c() {
button = element("button");
if_block.c();
attr(button, "class", "custom-button svelte-xfd0k7");
},
m(target, anchor) {
insert(target, button, anchor);
if_block.m(button, null);
},
p(ctx, dirty) {
if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block) {
if_block.p(ctx, dirty);
} else {
if_block.d(1);
if_block = current_block_type(ctx);
if (if_block) {
if_block.c();
if_block.m(button, null);
}
}
},
d(detaching) {
if (detaching) detach(button);
if_block.d();
}
};
}
// (107:43) {:else}
function create_else_block(ctx) {
let t;
return {
c() {
t = text("Custom Button");
},
m(target, anchor) {
insert(target, t, anchor);
},
p: noop,
d(detaching) {
if (detaching) detach(t);
}
};
}
// (107:4) {#if exampleChosen}
function create_if_block(ctx) {
let t;
return {
c() {
t = text(/*exampleFormatted*/ ctx[2]);
},
m(target, anchor) {
insert(target, t, anchor);
},
p(ctx, dirty) {
if (dirty & /*exampleFormatted*/ 4) set_data(t, /*exampleFormatted*/ ctx[2]);
},
d(detaching) {
if (detaching) detach(t);
}
};
}
// (105:2) <Datepicker bind:formattedSelected={exampleFormatted} bind:dateChosen={exampleChosen}>
function create_default_slot(ctx) {
let button;
function select_block_type_1(ctx, dirty) {
if (/*exampleChosen*/ ctx[3]) return create_if_block;
return create_else_block;
}
let current_block_type = select_block_type_1(ctx, -1);
let if_block = current_block_type(ctx);
return {
c() {
button = element("button");
if_block.c();
attr(button, "id", "test");
},
m(target, anchor) {
insert(target, button, anchor);
if_block.m(button, null);
},
p(ctx, dirty) {
if (current_block_type === (current_block_type = select_block_type_1(ctx, dirty)) && if_block) {
if_block.p(ctx, dirty);
} else {
if_block.d(1);
if_block = current_block_type(ctx);
if (if_block) {
if_block.c();
if_block.m(button, null);
}
}
},
d(detaching) {
if (detaching) detach(button);
if_block.d();
}
};
}
function create_fragment(ctx) {
let h1;
let t1;
let div6;
let p0;
let t3;
let datepicker0;
let t4;
let p1;
let t6;
let ul;
let t20;
let p2;
let t22;
let h40;
let t24;
let pre0;
let code0;
let t28;
let div0;
let datepicker1;
let updating_formattedSelected;
let updating_dateChosen;
let t29;
let h41;
let t31;
let pre1;
let t33;
let h42;
let t35;
let pre2;
let t37;
let div1;
let datepicker2;
let updating_formattedSelected_1;
let updating_dateChosen_1;
let t38;
let p3;
let t40;
let div2;
let datepicker3;
let t41;
let p4;
let t43;
let p5;
let t45;
let div3;
let datepicker4;
let t46;
let p6;
let t48;
let div4;
let datepicker5;
let t49;
let p7;
let t51;
let div5;
let datepicker6;
let t52;
let pre3;
let code3;
let current;
datepicker0 = new Datepicker({ props: { format: dateFormat } });
function datepicker1_formattedSelected_binding(value) {
/*datepicker1_formattedSelected_binding*/ ctx[8].call(null, value);
}
function datepicker1_dateChosen_binding(value) {
/*datepicker1_dateChosen_binding*/ ctx[9].call(null, value);
}
let datepicker1_props = {
format: dateFormat,
$$slots: { default: [create_default_slot_1] },
$$scope: { ctx }
};
if (/*formattedSelected*/ ctx[0] !== void 0) {
datepicker1_props.formattedSelected = /*formattedSelected*/ ctx[0];
}
if (/*dateChosen*/ ctx[1] !== void 0) {
datepicker1_props.dateChosen = /*dateChosen*/ ctx[1];
}
datepicker1 = new Datepicker({ props: datepicker1_props });
binding_callbacks.push(() => bind(datepicker1, "formattedSelected", datepicker1_formattedSelected_binding));
binding_callbacks.push(() => bind(datepicker1, "dateChosen", datepicker1_dateChosen_binding));
function datepicker2_formattedSelected_binding(value) {
/*datepicker2_formattedSelected_binding*/ ctx[10].call(null, value);
}
function datepicker2_dateChosen_binding(value) {
/*datepicker2_dateChosen_binding*/ ctx[11].call(null, value);
}
let datepicker2_props = {
$$slots: { default: [create_default_slot] },
$$scope: { ctx }
};
if (/*exampleFormatted*/ ctx[2] !== void 0) {
datepicker2_props.formattedSelected = /*exampleFormatted*/ ctx[2];
}
if (/*exampleChosen*/ ctx[3] !== void 0) {
datepicker2_props.dateChosen = /*exampleChosen*/ ctx[3];
}
datepicker2 = new Datepicker({ props: datepicker2_props });
binding_callbacks.push(() => bind(datepicker2, "formattedSelected", datepicker2_formattedSelected_binding));
binding_callbacks.push(() => bind(datepicker2, "dateChosen", datepicker2_dateChosen_binding));
datepicker3 = new Datepicker({
props: {
format: dateFormat,
start: /*threeDaysInPast*/ ctx[4],
end: /*inThirtyDays*/ ctx[6],
selectableCallback: /*noWeekendsSelectableCallback*/ ctx[7]
}
});
datepicker4 = new Datepicker({
props: {
format: dateFormat,
start: /*tomorrow*/ ctx[5],
end: /*inThirtyDays*/ ctx[6],
selectableCallback: /*noWeekendsSelectableCallback*/ ctx[7]
}
});
datepicker5 = new Datepicker({ props: { format: dateFormat } });
datepicker5.$on("dateSelected", /*dateSelected_handler*/ ctx[12]);
datepicker6 = new Datepicker({
props: {
format: dateFormat,
buttonBackgroundColor: "#e20074",
buttonTextColor: "white",
highlightColor: "#e20074",
dayBackgroundColor: "#efefef",
dayTextColor: "#333",
dayHighlightedBackgroundColor: "#e20074",
dayHighlightedTextColor: "#fff"
}
});
return {
c() {
h1 = element("h1");
h1.textContent = "svelte-calendar";
t1 = space();
div6 = element("div");
p0 = element("p");
p0.textContent = "A lightweight date picker written with Svelte. Here is an example:";
t3 = space();
create_component(datepicker0.$$.fragment);
t4 = space();
p1 = element("p");
p1.textContent = "This component can be used with or without the Svelte compiler.";
t6 = space();
ul = element("ul");
ul.innerHTML = `<li>Lightweight (~8KB)</li>
<li>IE11+ Compatible</li>
<li>Usable as a Svelte component</li>
<li>Usable with Vanilla JS / <Your Framework Here></li>
<li>Can be compiled to a native web component / custom element</li>
<li>Mobile/thumb friendly</li>
<li>Keyboard navigation (arrows, pgup/pgdown, tab, esc)</li>`;
t20 = space();
p2 = element("p");
p2.textContent = "Above you can see the default styling of this component. This will be created for you by default when using the component but you can also pass in your own calendar 'trigger' either as a slot (custom element or svelte) or as a DOM node reference (use as vanilla JS). Here are some examples:";
t22 = space();
h40 = element("h4");
h40.textContent = "With Svelte:";
t24 = space();
pre0 = element("pre");
code0 = element("code");
code0.textContent = `<Datepicker format=${dateFormat} bind:formattedSelected bind:dateChosen>
<button class='custom-button'>
{#if dateChosen} Chosen: {formattedSelected} {:else} Pick a date {/if}
</button>
</Datepicker>`;
t28 = space();
div0 = element("div");
create_component(datepicker1.$$.fragment);
t29 = space();
h41 = element("h4");
h41.textContent = "Without Svelte HTML:";
t31 = space();
pre1 = element("pre");
pre1.innerHTML = `<code class="html"><div class='button-container'>
<button id='test'>My Custom Button</button>
</div></code>`;
t33 = space();
h42 = element("h4");
h42.textContent = "Without Svelte JS:";
t35 = space();
pre2 = element("pre");
pre2.innerHTML = `<code class="js">var trigger = document.getElementById('test');
var cal = new SvelteCalendar({
target: document.querySelector('.button-container'),
anchor: trigger,
props: {
trigger: trigger
}
});</code>`;
t37 = space();
div1 = element("div");
create_component(datepicker2.$$.fragment);
t38 = space();
p3 = element("p");
p3.textContent = "You can confine the date selection range with start and end:";
t40 = space();
div2 = element("div");
create_component(datepicker3.$$.fragment);
t41 = space();
p4 = element("p");
p4.textContent = "Note: The calendar will only generate dates up until the end date, so it is recommended to set this value to whatever is useful for you.";
t43 = space();
p5 = element("p");
p5.textContent = "You can also provide a `selectableCallback` prop which can be used to mark individual days between `start` and `end` as selectable. This callback should accept a single date as an argument and return true (if selectable) or false (if unavailable).";
t45 = space();
div3 = element("div");
create_component(datepicker4.$$.fragment);
t46 = space();
p6 = element("p");
p6.textContent = "You can bind to the `dateSelected` event, which has a data property `date`:";
t48 = space();
div4 = element("div");
create_component(datepicker5.$$.fragment);
t49 = space();
p7 = element("p");
p7.textContent = "You can theme the datepicker:";
t51 = space();
div5 = element("div");
create_component(datepicker6.$$.fragment);
t52 = space();
pre3 = element("pre");
code3 = element("code");
code3.textContent = `<Datepicker
format=${dateFormat}
buttonBackgroundColor='#e20074'
buttonTextColor='white'
highlightColor='#e20074'
dayBackgroundColor='#efefef'
dayTextColor='#333'
dayHighlightedBackgroundColor='#e20074'
dayHighlightedTextColor='#fff'
/>`;
attr(h1, "class", "svelte-xfd0k7");
attr(code0, "class", "html");
attr(div0, "class", "text-center svelte-xfd0k7");
attr(div1, "class", "text-center svelte-xfd0k7");
attr(div2, "class", "text-center svelte-xfd0k7");
attr(p4, "class", "note svelte-xfd0k7");
attr(div3, "class", "text-center svelte-xfd0k7");
attr(div4, "class", "text-center svelte-xfd0k7");
attr(code3, "class", "html");
attr(div6, "class", "container svelte-xfd0k7");
},
m(target, anchor) {
insert(target, h1, anchor);
insert(target, t1, anchor);
insert(target, div6, anchor);
append(div6, p0);
append(div6, t3);
mount_component(datepicker0, div6, null);
append(div6, t4);
append(div6, p1);
append(div6, t6);
append(div6, ul);
append(div6, t20);
append(div6, p2);
append(div6, t22);
append(div6, h40);
append(div6, t24);
append(div6, pre0);
append(pre0, code0);
append(div6, t28);
append(div6, div0);
mount_component(datepicker1, div0, null);
append(div6, t29);
append(div6, h41);
append(div6, t31);
append(div6, pre1);
append(div6, t33);
append(div6, h42);
append(div6, t35);
append(div6, pre2);
append(div6, t37);
append(div6, div1);
mount_component(datepicker2, div1, null);
append(div6, t38);
append(div6, p3);
append(div6, t40);
append(div6, div2);
mount_component(datepicker3, div2, null);
append(div6, t41);
append(div6, p4);
append(div6, t43);
append(div6, p5);
append(div6, t45);
append(div6, div3);
mount_component(datepicker4, div3, null);
append(div6, t46);
append(div6, p6);
append(div6, t48);
append(div6, div4);
mount_component(datepicker5, div4, null);
append(div6, t49);
append(div6, p7);
append(div6, t51);
append(div6, div5);
mount_component(datepicker6, div5, null);
append(div6, t52);
append(div6, pre3);
append(pre3, code3);
current = true;
},
p(ctx, [dirty]) {
const datepicker1_changes = {};
if (dirty & /*$$scope, formattedSelected, dateChosen*/ 65539) {
datepicker1_changes.$$scope = { dirty, ctx };
}
if (!updating_formattedSelected && dirty & /*formattedSelected*/ 1) {
updating_formattedSelected = true;
datepicker1_changes.formattedSelected = /*formattedSelected*/ ctx[0];
add_flush_callback(() => updating_formattedSelected = false);
}
if (!updating_dateChosen && dirty & /*dateChosen*/ 2) {
updating_dateChosen = true;
datepicker1_changes.dateChosen = /*dateChosen*/ ctx[1];
add_flush_callback(() => updating_dateChosen = false);
}
datepicker1.$set(datepicker1_changes);
const datepicker2_changes = {};
if (dirty & /*$$scope, exampleFormatted, exampleChosen*/ 65548) {
datepicker2_changes.$$scope = { dirty, ctx };
}
if (!updating_formattedSelected_1 && dirty & /*exampleFormatted*/ 4) {
updating_formattedSelected_1 = true;
datepicker2_changes.formattedSelected = /*exampleFormatted*/ ctx[2];
add_flush_callback(() => updating_formattedSelected_1 = false);
}
if (!updating_dateChosen_1 && dirty & /*exampleChosen*/ 8) {
updating_dateChosen_1 = true;
datepicker2_changes.dateChosen = /*exampleChosen*/ ctx[3];
add_flush_callback(() => updating_dateChosen_1 = false);
}
datepicker2.$set(datepicker2_changes);
const datepicker3_changes = {};
if (dirty & /*threeDaysInPast*/ 16) datepicker3_changes.start = /*threeDaysInPast*/ ctx[4];
if (dirty & /*inThirtyDays*/ 64) datepicker3_changes.end = /*inThirtyDays*/ ctx[6];
datepicker3.$set(datepicker3_changes);
const datepicker4_changes = {};
if (dirty & /*tomorrow*/ 32) datepicker4_changes.start = /*tomorrow*/ ctx[5];
if (dirty & /*inThirtyDays*/ 64) datepicker4_changes.end = /*inThirtyDays*/ ctx[6];
datepicker4.$set(datepicker4_changes);
},
i(local) {
if (current) return;
transition_in(datepicker0.$$.fragment, local);
transition_in(datepicker1.$$.fragment, local);
transition_in(datepicker2.$$.fragment, local);
transition_in(datepicker3.$$.fragment, local);
transition_in(datepicker4.$$.fragment, local);
transition_in(datepicker5.$$.fragment, local);
transition_in(datepicker6.$$.fragment, local);
current = true;
},
o(local) {
transition_out(datepicker0.$$.fragment, local);
transition_out(datepicker1.$$.fragment, local);
transition_out(datepicker2.$$.fragment, local);
transition_out(datepicker3.$$.fragment, local);
transition_out(datepicker4.$$.fragment, local);
transition_out(datepicker5.$$.fragment, local);
transition_out(datepicker6.$$.fragment, local);
current = false;
},
d(detaching) {
if (detaching) detach(h1);
if (detaching) detach(t1);
if (detaching) detach(div6);
destroy_component(datepicker0);
destroy_component(datepicker1);
destroy_component(datepicker2);
destroy_component(datepicker3);
destroy_component(datepicker4);
destroy_component(datepicker5);
destroy_component(datepicker6);
}
};
}
let dateFormat = "#{l}, #{F} #{j}, #{Y}";
function logChoice(date) {
// eslint-disable-next-line
console.log(`User chose ${date}.`);
}
function instance($$self, $$props, $$invalidate) {
const today = new Date();
let start = new Date();
let noWeekendsSelectableCallback = date => date.getDay() !== 0 && date.getDay() !== 6;
let formattedSelected;
let dateChosen = false;
let exampleFormatted = false;
let exampleChosen = false;
let threeDaysInPast;
let tomorrow;
let inThirtyDays;
onMount(() => {
hljs.initHighlightingOnLoad();
});
function datepicker1_formattedSelected_binding(value) {
formattedSelected = value;
$$invalidate(0, formattedSelected);
}
function datepicker1_dateChosen_binding(value) {
dateChosen = value;
$$invalidate(1, dateChosen);
}
function datepicker2_formattedSelected_binding(value) {
exampleFormatted = value;
$$invalidate(2, exampleFormatted);
}
function datepicker2_dateChosen_binding(value) {
exampleChosen = value;
$$invalidate(3, exampleChosen);
}
const dateSelected_handler = e => logChoice(e.detail.date);
let end;
$: end = new Date(start.getTime() + 1000 * 3600 * 24 * 720);
$: {
const date = new Date(today);
date.setDate(date.getDate() - 3);
$$invalidate(4, threeDaysInPast = date);
}
$: {
const date = new Date(today);
date.setDate(date.getDate() + 1);
$$invalidate(5, tomorrow = date);
}
$: {
const date = new Date(start);
date.setDate(date.getDate() + 30);
$$invalidate(6, inThirtyDays = date);
}
return [
formattedSelected,
dateChosen,
exampleFormatted,
exampleChosen,
threeDaysInPast,
tomorrow,
inThirtyDays,
noWeekendsSelectableCallback,
datepicker1_formattedSelected_binding,
datepicker1_dateChosen_binding,
datepicker2_formattedSelected_binding,
datepicker2_dateChosen_binding,
dateSelected_handler
];
}
class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}
export default App;