I can’t get his calendar package to work https://github.com/react-component/calendar. *I read that a simple npm install does it, which it doesn’t appear to as it at least then goes and asks for npm modules install. Actual example of how real package would work at bottom.
npm won’t install dependencies by itself anymore. So any modules that are mentioned as missing, you’ll have to install yourself as well.
Where’s the logic in that, and it wants me to install npm modules.
Just to clarify, npm:
- will install dependencies of a package you install
- won’t install peer dependencies of a package you install
The latter is up to you to install, and are expected to be things you need for your app anyway and probably why you chose that package to begin with. (For the more technical specifics, if it interests you, read up on peer dependencies and the related npm v3 dependency resolution)).
In short, can you please paste the full output of the install command so we can more clearly see what’s going on.
1 Like
I was trying to get this to work https://github.com/react-component/calendar running on assumption that it wouldn’t require use of import functions and support react, just support it. What would be the actual usage/installation code as I followed all of the prompts importing main.js on a separate js file.
The official usage is:
import Calendar from ‘rc-calendar’;
import React from ‘react’;
import ReactDOM from ‘react-dom’;
ReactDOM.render(<Calendar />, container);
Yeah, do the npm install, copy the imports. Leave out the ReactDOM render line, assuming you already have a react site up and running, just put <Calendar /> in any of your existing react components.
Lol I’m doing the react todo app. Anyway what does this do: onClick={this.toggleChecked.bind(this)}. I get the this.method part, the function of bind is something I skimmed on, but I imagine more of anything this is a react thing. I imagine it passes a variable, then.
Well it’s meant to pick a date for you. Using extends component and var create class it just keeps throwing up error at the first declaration even if u keep chopping them.
Can you show us what your component looks like?
I used one of the example uses for ranged calendar.
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import 'rc-calendar/assets/index.css';
import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
import GregorianCalendarFormat from 'gregorian-calendar-format';
const formatter = new GregorianCalendarFormat('yyyy-MM-dd HH:mm:ss');
import GregorianCalendar from 'gregorian-calendar';
import en_US from 'gregorian-calendar/lib/locale/en_US';
import CalendarLocale from 'rc-calendar/lib/locale/en_US';
import TimePickerLocale from 'rc-time-picker/lib/locale/en_US';
import Picker from 'rc-calendar/lib/Picker';
import 'rc-time-picker/assets/index.css';
import TimePicker from 'rc-time-picker';
const timePickerElement = <TimePicker placeholder="请选择时间" locale={TimePickerLocale}/>;
export default class Calendar extends React.Component({
const now = new GregorianCalendar(enUS);
now.setTime(Date.now());
function disabledDate(current) {
const date = new Date();
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
return current.getTime() < date.getTime(); // can not select days before today
}
function format(v) {
return v ? formatter.format(v) : '';
}
function isValidRange(v) {
return v && v[0] && v[1];
}
function onStandaloneChange(value) {
console.log('onChange');
console.log(value[0] && format(value[0]), value[1] && format(value[1]));
}
function onStandaloneSelect(value) {
console.log('onSelect');
console.log(format(value[0]), format(value[1]));
}
const Test = React.createClass({
getInitialState() {
return {
value: [],
};
},
onChange(value) {
this.setState({ value });
},
render() {
const state = this.state;
const calendar = (
<RangeCalendar
showWeekNumber={false}
dateInputPlaceholder={['开始日期', '结束日期']}
defaultValue={[now, now]}
locale={CalendarLocale}
disabledDate={disabledDate}
timePicker={timePickerElement}
/>
);
return (<Picker
value={state.value}
onChange={this.onChange}
animation="slide-up"
calendar={calendar}
>
{
({ value }) => {
return (<span>
<input
placeholder="请选择日期"
style={{ width: 350 }}
disabled={state.disabled}
readOnly
className="ant-calendar-picker-input ant-input"
value={isValidRange(value) && `${format(value[0])} - ${format(value[1])}`}
/>
</span>);
}
}
</Picker>);
},
});
ReactDOM.render(
<div>
<h2>calendar (zh-cn)</h2>
<div style={{ margin: 10 }}>
<RangeCalendar
showWeekNumber
defaultValue={now}
dateInputPlaceholder={['开始日期', '结束日期']}
locale={CalendarLocale}
showOk={false}
onChange={onStandaloneChange}
onSelect={onStandaloneSelect}
disabledDate={disabledDate}
timePicker={timePickerElement}
/>
</div>
<br/>
<div style={{ margin: 20 }}>
<Test />
</div>
</div>, document.getElementById('__react-content'));
});You have a lot going on in there that isn’t part of the original example from their site :>
The changes I would suggest from the original would be to drop the ReactDOM render bit at the end, add an export default Test;, and then import and use that in another file, e.g.
import React, { Component } from 'react';
import MyCalendar from './thatFile';
class MyComponent extends Component {
render() {
return (
<div>
<MyCalendar />
</div>
);
}
}
or maybe start with one of the simpler examples.
This is where I copied and pasted from: legit.
http://react-component.github.io/calendar/examples/antd-range-calendar.html
So left out the reactdom, but left render. I kinda ignore import thatFile thing, to then realize that I’m suppose to export that file into this file, but then I can’t teall what’s suppose to happen as the only way that I know how to actually apply react on view is through render(<Calendar />, document.getElementByClass('render-target') - through meteor.startup.
CLI stopped caring after I changed to Calendar/>, container), and removed create class. Now I just got a blank screen with with somewhat chopped up code- no more errors.
Like this 
1 Like
Alright I kinda looked at the code and although it’s disconcerting that html is abstracted away, hypothetically following the react in blaze guide I should get around to being able to insert it into html. Actually I can’t get my head around to wether if I actually pass data to some other collection with that, how is this nothing like the tutorial, is there some guide on implementing components out there from react into blaze like this.
Alright I’m converting this fucker to a meteor api, I reallisticaly shoud’ve been doing that on outset though? The whole npm install integration is a lie! Although I’m trying out the tutorial style accountsuiwrapper.
PS the objective here is to create interface for booking hotel rooms with room types, count and availability.
This is the first time you mentioned Blaze
Instead of the MyApp component I gave as example, you’d simply (after installing the prerequisite packages from the guide), do:
<template name="home">
<h1>Calendar Example</h1>
{{> React component=MyCalendar}}
</template>
Template.home.helpers({
MyCalendar() { return MyCalendar }
});
That’s the gist of it, but you need to install the packages and use the rest of the imports as per the guide.
I’d rather stick with the app approach but something that lets me actually control where I stick the stuff. And the app approach that you mentioned doesn’t look like something that would let me pass data between components, I mean neither do. Is this something that doesn’t break data processing because .props (properties) requires that components that relly on the same data need parent. This doesn’t work though.
export default class CalendarWrapper extends React.Component {
componentDidMount() {
// Use Meteor Blaze to render login buttons
this.view = Blaze.render(Template.MyCalendar,
ReactDOM.findDOMNode(this.refs.calendarContainer));
}
componentWillUnmount() {
// Clean up Blaze view
Blaze.remove(this.view);
}
render() {
return <span ref="calendarContainer" />;
}
}
// App.jsx
class App extends Component {
rend() {
return (
<CalendarWrapper />
);
}
}I don’t really understand what you’re trying to do. Your example above looks like you’re taking a react component (rc-calendar), converting it to a Blaze component (somewhere in Template.MyCalendar) and then converting it back to a react component (with CalendarWrapper).
I think you just need to spend more time with the guide. Regardless of which direction you go (react->blaze, blaze->react), you can pass down props/attributes and use the component/template anywhere in your code:
{{> React component=SomeCompent prop1=value1 prop2=value2 }}
<Blaze template="SomeTemplate" prop1={value1} prop2={value2} />
It might be better if you start with a simpler example first… rc-calendar looks quite involved, if it’s your first time using a react-component.
So if MyComponent in the first example with export default Test, I’ll be able to achieve reactivity with the MyComponent as the App, say click on a reservation listing and calendar changes it’s state.
How you handle state is up to you… from looking at the example range calendar, it keeps it’s state inside of a regular <input />. There are a 1001 ways to handle forms, you’ll have to decide which is best for you. You could also just modify the onChange() method directly, to, in addition to setting the state in the component itself, do a minimongo query, set a reactive-var, do a method call, or whatever you feel is best.
Somewhere in react documentation it says that you want the app structure for handling data, therefore I’m looking for the same app structure as in official tutorial. So is there a way to either remove root thing that while serves as a wrapper basically is impractical other than a hack, or create a class or component. I basically expect for the thing change state depending on other components.