他们是在 javascript 中添加循环吗
is their was to add loop inside in javascript
我尝试使用日历代码笔中的模板，所以我的目标是添加一些具有事件名称、开始和结束的事件 date.So 我正在使用 java 并使用 JSP to code this is the code output is coming but it's required to define indexes, again, I tried many ways of adding loops but getting errors
代码输出
<%@page import="java.util.Arrays"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
</head>
<body>
<br/>
<div class="ui container">
<div class="ui grid">
<div class="ui sixteen column">
<div id="calendar"></div>
</div>
</div>
</div>
<%
String[] eventArray=new String[3];
String[] startdateArray=new String[3];
String[] enddateArray=new String[3];
int i=0;
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/calendar","root","");
Statement st=(Statement) con.createStatement();
ResultSet rs=(ResultSet) st.executeQuery("select * from events");
while(rs.next()){
eventArray[i]=rs.getString("event");
startdateArray[i]=rs.getString("startdate");
enddateArray[i]=rs.getString("enddate");
/*System.out.println("Event is:" +eve);
System.out.println("Starting Date is:" +startdate);
System.out.println("Ending date is:" +enddate);*/
i=i+1;
}
} catch (Exception e) {
e.printStackTrace();
}
%>
<script>
var event=[ ];
var startd=[ ];
var endd=[ ];
<%for(int x=0;x<eventArray.length;x++) {%>
event[<%= x %>]='<%=eventArray[x]%>';
startd[<%= x %>]='<%=startdateArray[x]%>';
endd[<%= x %>]='<%=enddateArray[x]%>';
<%}%>
var j=0;
even:[
{ title: event[j] ,start: startd[j],end: endd[j],}
]
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2020-06-28',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{ title: event[j] ,start: startd[j],end: endd[j],},
//{ title: event[5] ,start: startd[5],end: endd[5],},
//{ title: event[j] ,start: startd[j],end: endd[j],},
//{ title: event[j+1] ,start: startd[j+1],end: endd[j+1],},
//{ title: event[j+2] ,start: startd[j+2],end: endd[j+2],},
]
});
});
</script>
所以我刚刚在数据库中添加了 3 个事件，所以删除了评论我得到了这 3 个与事件相关的日期，但是如果它们是 100 个事件，我无法正确添加 100 个，所以我需要一些方法来解决这个问题
请有人帮助我
任何想法请发表评论，以便我们尝试
提前致谢
谢谢。
您可以使用 objects 创建 json-array 并将其传递给 fullcalender 下的 events，而不是在 js 中创建 3 个不同的数组。一些您需要在代码中进行的更改：
您的javascript代码：
<script>
var datas=new Array(); //declare this
<%for(int x=0;x<eventArray.length;x++) {%>
//adding data
items={};
items["title"]='<%=eventArray[x]%>';
items["start"]='<%=startdateArray[x]%>';
items["end"]='<%=enddateArray[x]%>';
datas.push(items);//push data into array
<%}%>
console.log(datas)
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2020-06-28',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: datas //pass same json array created
});
});
</script>
演示代码 :
var datas=new Array();
//adding dummy data
items={};
items["title"]="abc";
items["start"]="2020-05-20";
items["end"]="2020-05-26";
datas.push(items);
//adding dummy data
items={};
items["title"]="abwc";
items["start"]="2020-06-15";
items["end"]="2020-06-28";
datas.push(items);
console.log(datas)
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2020-06-28',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events:datas//passs the same
});
});
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div class="ui container">
<div class="ui grid">
<div class="ui sixteen column">
<div id="calendar"></div>
</div>
</div>
</div>
我尝试使用日历代码笔中的模板，所以我的目标是添加一些具有事件名称、开始和结束的事件 date.So 我正在使用 java 并使用 JSP to code this is the code output is coming but it's required to define indexes, again, I tried many ways of adding loops but getting errors
代码输出<%@page import="java.util.Arrays"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
</head>
<body>
<br/>
<div class="ui container">
<div class="ui grid">
<div class="ui sixteen column">
<div id="calendar"></div>
</div>
</div>
</div>
<%
String[] eventArray=new String[3];
String[] startdateArray=new String[3];
String[] enddateArray=new String[3];
int i=0;
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/calendar","root","");
Statement st=(Statement) con.createStatement();
ResultSet rs=(ResultSet) st.executeQuery("select * from events");
while(rs.next()){
eventArray[i]=rs.getString("event");
startdateArray[i]=rs.getString("startdate");
enddateArray[i]=rs.getString("enddate");
/*System.out.println("Event is:" +eve);
System.out.println("Starting Date is:" +startdate);
System.out.println("Ending date is:" +enddate);*/
i=i+1;
}
} catch (Exception e) {
e.printStackTrace();
}
%>
<script>
var event=[ ];
var startd=[ ];
var endd=[ ];
<%for(int x=0;x<eventArray.length;x++) {%>
event[<%= x %>]='<%=eventArray[x]%>';
startd[<%= x %>]='<%=startdateArray[x]%>';
endd[<%= x %>]='<%=enddateArray[x]%>';
<%}%>
var j=0;
even:[
{ title: event[j] ,start: startd[j],end: endd[j],}
]
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2020-06-28',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{ title: event[j] ,start: startd[j],end: endd[j],},
//{ title: event[5] ,start: startd[5],end: endd[5],},
//{ title: event[j] ,start: startd[j],end: endd[j],},
//{ title: event[j+1] ,start: startd[j+1],end: endd[j+1],},
//{ title: event[j+2] ,start: startd[j+2],end: endd[j+2],},
]
});
});
</script>
所以我刚刚在数据库中添加了 3 个事件，所以删除了评论我得到了这 3 个与事件相关的日期，但是如果它们是 100 个事件，我无法正确添加 100 个，所以我需要一些方法来解决这个问题 请有人帮助我 任何想法请发表评论，以便我们尝试 提前致谢 谢谢。
您可以使用 objects 创建 json-array 并将其传递给 fullcalender 下的 events，而不是在 js 中创建 3 个不同的数组。一些您需要在代码中进行的更改：
您的javascript代码：
<script>
var datas=new Array(); //declare this
<%for(int x=0;x<eventArray.length;x++) {%>
//adding data
items={};
items["title"]='<%=eventArray[x]%>';
items["start"]='<%=startdateArray[x]%>';
items["end"]='<%=enddateArray[x]%>';
datas.push(items);//push data into array
<%}%>
console.log(datas)
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2020-06-28',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: datas //pass same json array created
});
});
</script>
演示代码 :
var datas=new Array();
//adding dummy data
items={};
items["title"]="abc";
items["start"]="2020-05-20";
items["end"]="2020-05-26";
datas.push(items);
//adding dummy data
items={};
items["title"]="abwc";
items["start"]="2020-06-15";
items["end"]="2020-06-28";
datas.push(items);
console.log(datas)
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2020-06-28',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events:datas//passs the same
});
});
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div class="ui container">
<div class="ui grid">
<div class="ui sixteen column">
<div id="calendar"></div>
</div>
</div>
</div>