Javascript 框架7日历：未捕获的语法错误：意外标记'；出口'；
我刚刚创建了一个新的Framework7 tabs应用程序。我正在尝试实现F7日历。我已经在index.html页面（不是模板）上添加了日历的占位符Javascript 框架7日历：未捕获的语法错误：意外标记'；出口'；,javascript,calendar,html-framework-7,Javascript,Calendar,Html Framework 7,我刚刚创建了一个新的Framework7 tabs应用程序。我正在尝试实现F7日历。我已经在index.html页面（不是模板）上添加了日历的占位符 与自定义工具栏内联 之后，我复制了该页面底部文档中提供的整个脚本 <script> export default (props, { $, $f7, $on }) => { let calendarDefault; let calendarDateFormat; let calendarDat
与自定义工具栏内联
<script>
export default (props, { $, $f7, $on }) => {
let calendarDefault;
let calendarDateFormat;
let calendarDateTime;
let calendarMultiple;
let calendarRange;
let calendarModal;
let calendarEvents;
let calendarDisabled;
let calendarInline;
$on("pageInit", () => {
// Default
calendarDefault = $f7.calendar.create({
inputEl: "#demo-calendar-default",
});
// With custom date format
calendarDateFormat = $f7.calendar.create({
inputEl: "#demo-calendar-date-format",
dateFormat: {
weekday: "long",
month: "long",
day: "2-digit",
year: "numeric",
},
});
// Date + Time
calendarDateTime = $f7.calendar.create({
inputEl: "#demo-calendar-date-time",
timePicker: true,
dateFormat: {
month: "numeric",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
},
});
// With multiple values
calendarMultiple = $f7.calendar.create({
inputEl: "#demo-calendar-multiple",
dateFormat: { month: "short", day: "numeric" },
multiple: true,
});
// Range Picker
calendarRange = $f7.calendar.create({
inputEl: "#demo-calendar-range",
rangePicker: true,
});
// Custom modal
calendarModal = $f7.calendar.create({
inputEl: "#demo-calendar-modal",
openIn: "customModal",
header: true,
footer: true,
});
// With events
var now = new Date();
var today = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate()
);
var weekLater = new Date().setDate(today.getDate() + 7);
calendarEvents = $f7.calendar.create({
inputEl: "#demo-calendar-events",
events: [
{
from: today,
to: weekLater,
},
//- more events this day
{
date: today,
color: "#ff0000",
},
{
date: today,
color: "#00ff00",
},
],
});
// Disabled
var today = new Date();
var weekLater = new Date().setDate(today.getDate() + 7);
calendarDisabled = $f7.calendar.create({
inputEl: "#demo-calendar-disabled",
disabled: {
from: today,
to: weekLater,
},
});
// Inline with custom toolbar
var monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
calendarInline = $f7.calendar.create({
containerEl: "#demo-calendar-inline-container",
value: [new Date()],
weekHeader: false,
renderToolbar: function () {
return `
<div class="toolbar calendar-custom-toolbar no-shadow">
<div class="toolbar-inner">
<div class="left">
<a href="#" class="link icon-only"><i class="icon icon-back ${
$f7.theme === "md" ? "color-black" : ""
}"></i></a>
</div>
<div class="center"></div>
<div class="right">
<a href="#" class="link icon-only"><i class="icon icon-forward ${
$f7.theme === "md" ? "color-black" : ""
}"></i></a>
</div>
</div>
</div>
`;
},
on: {
init: function (c) {
$(".calendar-custom-toolbar .center").text(
monthNames[c.currentMonth] + ", " + c.currentYear
);
$(".calendar-custom-toolbar .left .link").on(
"click",
function () {
calendarInline.prevMonth();
}
);
$(".calendar-custom-toolbar .right .link").on(
"click",
function () {
calendarInline.nextMonth();
}
);
},
monthYearChangeStart: function (c) {
$(".calendar-custom-toolbar .center").text(
monthNames[c.currentMonth] + ", " + c.currentYear
);
},
},
});
});
return $render;
};
</script>
导出默认值（props，{$，$f7，$on}）=>{
让日历默认；
让我们来看看格式；
让我们一起分享时间；
让日历多个；
让我们看看范围；
让我们一起来；
让日历记录事件；
让我们把它禁用；
让日历内联；
$on（“pageInit”，（）=>{
//违约
calendarDefault=$f7.calendar.create({
输入：“#演示日历默认值”，
});
//使用自定义日期格式
calendarDateFormat=$f7.calendar.create({
输入：“#演示日历日期格式”，
日期格式：{
工作日：“长”，
月：“长”，
日期：“两位数”，
年份：“数字”，
},
});
//日期+时间
calendarDateTime=$f7.calendar.create({
输入：“#演示日历日期时间”，
时间选择器：是的，
日期格式：{
月份：“数字”，
日期：“数字”，
年份：“数字”，
小时：“数字”，
分钟：“数字”，
},
});
//具有多个值
calendarMultiple=$f7.calendar.create({
输入：“#演示日历多个”，
日期格式：{月：“短”，日：“数字”}，
多重：对，
});
//测距选择器
calendarRange=$f7.calendar.create({
输入：“演示日历范围”，
真的，
});
//自定义模态
calendarModal=$f7.calendar.create({
输入：“#演示日历模式”，
openIn:“自定义模式”，
标题：对，
页脚：是的，
});
//事件
var now=新日期（）；
var today=新日期(
现在。getFullYear（），
现在。getMonth（），
现在，getDate（）是
);
var weekLater=new Date（）.setDate（today.getDate（）+7）；
calendarEvents=$f7.calendar.create({
输入：“#演示日历事件”，
活动：[
{
发信人：今天，
致：weekLater，
},
//-今天还有更多的活动
{
日期：今天，
颜色：“ff0000”，
},
{
日期：今天，
颜色：“00ff00”，
},
],
});
//残废
var today=新日期（）；
var weekLater=new Date（）.setDate（today.getDate（）+7）；
calendarDisabled=$f7.calendar.create({
输入：“演示日历已禁用”，
残疾人士：{
发信人：今天，
致：weekLater，
},
});
//与自定义工具栏内联
var monthNames=[
“一月”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”，
“9月”，
“十月”，
“11月”，
“12月”，
];
calendarInline=$f7.calendar.create({
Containerre:#演示日历内联容器“，
值：[新日期（）]，
周组长：错，
renderToolbar:函数（）{
返回`
`;
},
关于：{
init：函数（c）{
$（“.calendar custom toolbar.center”）.text(
月份[当前月份]+“，”+当前年度
);
$（“.calendar-custom-toolbar.left.link”）。打开(
“点击”，
函数（）{
calendarInline.prevMonth（）；
}
);
$（“.calendar-custom-toolbar.right.link”）。在(
“点击”，
函数（）{
calendarInline.nextMonth（）；
}
);
},
monthYearChangeStart：功能（c）{
$（“.calendar custom toolbar.center”）.text(
月份[当前月份]+“，”+当前年度
);
},
},
});
});
返回$render；
};
<script>
export default (props, { $, $f7, $on }) => {
let calendarDefault;
let calendarDateFormat;
let calendarDateTime;
let calendarMultiple;
let calendarRange;
let calendarModal;
let calendarEvents;
let calendarDisabled;
let calendarInline;
$on("pageInit", () => {
// Default
calendarDefault = $f7.calendar.create({
inputEl: "#demo-calendar-default",
});
// With custom date format
calendarDateFormat = $f7.calendar.create({
inputEl: "#demo-calendar-date-format",
dateFormat: {
weekday: "long",
month: "long",
day: "2-digit",
year: "numeric",
},
});
// Date + Time
calendarDateTime = $f7.calendar.create({
inputEl: "#demo-calendar-date-time",
timePicker: true,
dateFormat: {
month: "numeric",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
},
});
// With multiple values
calendarMultiple = $f7.calendar.create({
inputEl: "#demo-calendar-multiple",
dateFormat: { month: "short", day: "numeric" },
multiple: true,
});
// Range Picker
calendarRange = $f7.calendar.create({
inputEl: "#demo-calendar-range",
rangePicker: true,
});
// Custom modal
calendarModal = $f7.calendar.create({
inputEl: "#demo-calendar-modal",
openIn: "customModal",
header: true,
footer: true,
});
// With events
var now = new Date();
var today = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate()
);
var weekLater = new Date().setDate(today.getDate() + 7);
calendarEvents = $f7.calendar.create({
inputEl: "#demo-calendar-events",
events: [
{
from: today,
to: weekLater,
},
//- more events this day
{
date: today,
color: "#ff0000",
},
{
date: today,
color: "#00ff00",
},
],
});
// Disabled
var today = new Date();
var weekLater = new Date().setDate(today.getDate() + 7);
calendarDisabled = $f7.calendar.create({
inputEl: "#demo-calendar-disabled",
disabled: {
from: today,
to: weekLater,
},
});
// Inline with custom toolbar
var monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
calendarInline = $f7.calendar.create({
containerEl: "#demo-calendar-inline-container",
value: [new Date()],
weekHeader: false,
renderToolbar: function () {
return `
<div class="toolbar calendar-custom-toolbar no-shadow">
<div class="toolbar-inner">
<div class="left">
<a href="#" class="link icon-only"><i class="icon icon-back ${
$f7.theme === "md" ? "color-black" : ""
}"></i></a>
</div>
<div class="center"></div>
<div class="right">
<a href="#" class="link icon-only"><i class="icon icon-forward ${
$f7.theme === "md" ? "color-black" : ""
}"></i></a>
</div>
</div>
</div>
`;
},
on: {
init: function (c) {
$(".calendar-custom-toolbar .center").text(
monthNames[c.currentMonth] + ", " + c.currentYear
);
$(".calendar-custom-toolbar .left .link").on(
"click",
function () {
calendarInline.prevMonth();
}
);
$(".calendar-custom-toolbar .right .link").on(
"click",
function () {
calendarInline.nextMonth();
}
);
},
monthYearChangeStart: function (c) {
$(".calendar-custom-toolbar .center").text(
monthNames[c.currentMonth] + ", " + c.currentYear
);
},
},
});
});
return $render;
};
</script>